@progress/kendo-angular-conversational-ui 19.1.1-develop.2 → 19.1.2-develop.1

package/fesm2022/progress-kendo-angular-conversational-ui.mjs

@@ -21,12 +21,20 @@ import { DialogContainerService, DialogService, WindowService, WindowContainerSe
 import { PanelBarComponent } from '@progress/kendo-angular-layout';
 
 /**
- * Defines a template that will be used for displaying message attachments. To define an attachment
- * template, nest an `<ng-template>` tag with the `kendoChatAttachmentTemplate` attribute inside the
- * `<kendo-chat>` component. The template context is set to the attachment instance. For more information,
- * refer to the article on [message attachments]({% slug attachments_chat %}).
+ * Defines a template for displaying message attachments.
  *
- * <demo metaUrl="conversational-ui/chat/attachments/templates/" height="700"></demo>
+ * To define an attachment template, nest an `<ng-template>` tag with the `kendoChatAttachmentTemplate` attribute inside the `<kendo-chat>` component.
+ * The template context is set to the attachment instance.
+ * For more information, refer to the article on [message attachments](slug:attachments_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAttachmentTemplate let-attachment>
+ *     <div>Attachment: {{ attachment.content }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
  */
 class AttachmentTemplateDirective {
     templateRef;
@@ -47,15 +55,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Arguments for the `SendMessage` event.
- *
+ * Describes the arguments for the `sendMessage` event.
  */
 class SendMessageEvent {
     /**
-     * The message which contains the metadata and the user input.
+     * Represents the message that contains the metadata and user input.
      *
-     * > The Chat does not automatically append the message to its data.
-     * > For more information, refer to the article on [data binding]({% slug databinding_chat %}).
+     * > The Chat does not automatically add the message to its data.
+     * > For more information, see [Data Binding](slug:databinding_chat).
      */
     message;
     /**
@@ -88,12 +95,20 @@ const handlers = {
 const makeHandler = (action) => handlers[action.type] || noop;
 
 /**
- * Defines a template that will be used for displaying Chat messages. To define an attachment
- * template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` attribute inside the
- * `<kendo-chat>` component. The template context is set to the message instance. For more information,
- * refer to the article on [message templates]({% slug message_templates_chat %}).
+ * Defines a template for displaying Chat messages.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
  *
- * <demo metaUrl="conversational-ui/chat/messages/templates/" height="700"></demo>
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
  */
 class MessageTemplateDirective {
     templateRef;
@@ -121,15 +136,25 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749196920,
-    version: '19.1.1-develop.2',
+    publishDate: 1749804503,
+    version: '19.1.2-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
- * Creates a message box area that overrides the default message box of the Conversational UI Component.
- * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
- * [see example]({% slug message_box %}#toc-message-box-template).
+ * Creates a message box area that overrides the default message box of the Chat component.
+ *
+ * To define a message box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag.
+ * For more information, see [Message Box Template](slug:message_box#toc-message-box-template).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageBoxTemplate>
+ *     <input type="text" placeholder="Custom message box..." />
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
  */
 class ChatMessageBoxTemplateDirective {
     templateRef;
@@ -361,8 +386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-// eslint-disable max-line-length
-
 /**
  * @hidden
  */
@@ -389,16 +412,18 @@ class PreventableEvent {
 }
 
 /**
- * Arguments for the `executeAction` event. The `executeAction` event fires when the user clicks
- * a quick action button. Calling `preventDefault()` suppresses the built-in action handler.
+ * Represents the arguments for the `executeAction` event.
+ *
+ * The `executeAction` event fires when the user clicks a quick action button.
+ * Call `preventDefault()` to suppress the built-in action handler.
  */
 class ExecuteActionEvent extends PreventableEvent {
     /**
-     * The action that will be executed.
+     * Represents the action to execute.
      */
     action;
     /**
-     * The message that contains the action.
+     * Represents the message that contains the action.
      */
     message;
     /**
@@ -1488,7 +1513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 let Messages$1 = class Messages extends ComponentMessages {
     /**
-     * Sets the placeholder text of the message text input.
+     * Sets the placeholder text for the message text input.
      */
     messagePlaceholder;
     /**
@@ -1496,24 +1521,23 @@ let Messages$1 = class Messages extends ComponentMessages {
      */
     send;
     /**
-     * The label for the Message list.
+     * Sets the label for the message list.
      */
     messageListLabel;
     /**
-     * The label for the Message input box.
-     *
+     * Sets the label for the message input box.
      */
     messageBoxInputLabel;
     /**
-     * The text for the left arrow of the message attachments.
+     * Sets the text for the left arrow of the message attachments.
      */
     messageAttachmentLeftArrow;
     /**
-     * The text for the right arrow of the message attachments.
+     * Sets the text for the right arrow of the message attachments.
      */
     messageAttachmentRightArrow;
     /**
-     * The alt attribute text for the avatar image.
+     * Sets the `alt` attribute text for the avatar image.
      */
     messageAvatarAlt;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -1574,44 +1598,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Represents the Kendo UI Chat component for Angular.
+ * Represents the [Kendo UI Chat component for Angular](slug:overview_convui).
  *
- * <demo metaUrl="conversational-ui/chat/echo/" height="700"></demo>
+ * Provides a conversational UI for chat-based applications.
+ * Supports message templates, attachments, localization, and user actions.
  *
+ * @example
+ * ```html
+ * <kendo-chat
+ *   [messages]="messages"
+ *   [user]="user"
+ *   (sendMessage)="onSendMessage($event)"
+ *   (executeAction)="onExecuteAction($event)">
+ * </kendo-chat>
+ * ```
  */
 class ChatComponent {
     localization;
     zone;
     /**
-     * Sets the messages of the Chat.
-     * The message timestamp, if provided, tracks unique messages.
+     * Defines the array of messages displayed in the Chat.
+     * Each message can include a timestamp for unique identification.
      * For more information, refer to [ngFor - Change Tracking](link:site.data.urls.angular['ngforof']#change-propagation).
      */
     messages;
     /**
-     * Sets the [`User`]({% slug api_conversational-ui_user %}) instance for the local user.
-     * The User ID identifies messages that are authored by the local user.
+     * Specifies the [`User`](slug:api_conversational-ui_user) instance representing the local user.
+     * The User ID is used to distinguish messages authored by the local user.
      */
     user;
     /**
-     * Used to switch between a one-liner input or a textarea.
-     * ([see example]({% slug message_box %})#toc-message-box-types).
-     * @default input
+     * Determines the type of input used in the message box.
+     * Can be set to `textbox` for a single-line input or `textarea` for multi-line input
+     * ([see example](slug:message_box#message-box-types)).
+     * @default 'textbox'
      */
     messageBoxType = 'textbox';
     /**
-     * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
-     * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
+     * Emits when the user sends a message by clicking the **Send** button or pressing **Enter**.
      *
-     * > The message is not automatically appended to the `messages` array.
+     * > The message is not automatically added to the `messages` array.
      */
     sendMessage = new EventEmitter();
     /**
-     * Fires when the user clicks a quick action button.
-     * The Chat internally handles the `reply`, `openUrl`, and `call` [known actions]({% slug api_conversational-ui_actiontype %}).
+     * Emits when the user clicks a quick action button.
+     * The Chat internally handles [known actions](slug:api_conversational-ui_actiontype) such as `reply`, `openUrl`, and `call`.
      *
-     * Emits the [`ExecuteActionEvent`]({% slug api_conversational-ui_executeactionevent %}).
-     * The event is preventable. If `preventDefault` is called, the built-in action will be suppressed.
+     * The event is preventable&mdash;calling `preventDefault` suppresses the built-in action.
      */
     executeAction = new EventEmitter();
     get className() {
@@ -1898,7 +1931,7 @@ class BaseView {
         }
     }
     /**
-     * The text of the ToolBar button corresponding to the view.
+     * Sets the text for the Toolbar button of the current view.
      */
     set buttonText(value) {
         this._buttonText = value;
@@ -1909,8 +1942,8 @@ class BaseView {
             this.messageFor(`${this.viewType}View`);
     }
     /**
-    * The font icon of the ToolBar button corresponding to the view.
-    */
+     * Sets the font icon for the Toolbar button of the current view.
+     */
     set icon(value) {
         if (isPresent(value)) {
             this._icon = value;
@@ -1923,8 +1956,8 @@ class BaseView {
         return this._icon;
     }
     /**
-    * The SVG icon of the ToolBar button corresponding to the view.
-    */
+     * Sets the SVG icon for the Toolbar button of the current view.
+     */
     set svgIcon(value) {
         if (isPresent(value)) {
             this._svgIcon = value;
@@ -2002,10 +2035,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Represents a template that allows you to define additional ToolBar actions.
- * The actions will be rendered right after all views' ToolBar buttons.
+ * Represents a template for additional Toolbar actions.
+ * The actions appear after the Toolbar buttons for all views.
+ *
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoAIPromptToolbarActionsTemplate` directive inside the `<kendo-aiprompt>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt>
+ *   <ng-template kendoAIPromptToolbarActionsTemplate>
+ *     <button kendoButton>Custom Action</button>
+ *   </ng-template>
+ * </kendo-aiprompt>
+ * ```
  */
 class AIPromptToolbarActionsDirective {
     templateRef;
@@ -2142,39 +2185,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class Messages extends ComponentMessages {
     /**
-     * The Toolbar button text for the Prompt view.
+     * Sets the Toolbar button text for the **Prompt** view.
      */
     promptView;
     /**
-     * The Toolbar button text for the Output view.
+     * Sets the Toolbar button text for the **Output** view.
      */
     outputView;
     /**
-     * The text for the Generate button in the Prompt view.
+     * Sets the text for the **Generate** button in the **Prompt** view.
      */
     generateOutput;
     /**
-     * The placeholder text for the Prompt View text area.
+     * Sets the placeholder text for the **Prompt** view text area.
      */
     promptPlaceholder;
     /**
-     * The Copy button text in each Output view card.
+     * Sets the text for the **Copy** button text in each **Output** view card.
      */
     copyOutput;
     /**
-     * The Retry button text in each Output view card.
+     * Sets the **Retry** button text in each **Output** view card.
      */
     retryGeneration;
     /**
-     * The title of each Output view card.
+     * Sets the title of each card in the **Output** view.
      */
     outputTitle;
     /**
-     * The title of each Output view retry card.
+     * Sets the title of each retry card in the **Output** view.
      */
     outputRetryTitle;
     /**
-     * The title of the Prompt suggestions button.
+     * Sets the title of the **Prompt suggestions** button.
      */
     promptSuggestions;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -2234,7 +2277,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Represents the Kendo UI AIPrompt component for Angular.
+ * Represents the [Kendo UI AIPrompt component for Angular](slug:overview_aiprompt).
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt
+ *   [promptCommands]="commands"
+ *   [promptSuggestions]="suggestions"
+ *   [promptOutputs]="outputs"
+ *   [showOutputRating]="true"
+ *   (promptRequest)="onPromptRequest($event)">
+ * </kendo-aiprompt>
+ * ```
  */
 class AIPromptComponent {
     localization;
@@ -2277,52 +2331,52 @@ class AIPromptComponent {
         return this._activeView;
     }
     /**
-     * The collection of commands that will be rendered in the Command view.
+     * Sets the collection of commands to render in the **Command** view.
      */
     set promptCommands(value) {
         this.service.promptCommands = value;
     }
     /**
-     * The collection of suggestions that will be rendered in the Prompt view.
+     * Sets the collection of suggestions to render in the **Prompt** view.
      */
     set promptSuggestions(value) {
         this.service.promptSuggestions = value;
     }
     /**
-     * The collection of generated prompt outputs that will be rendered in the Output view.
+     * Sets the collection of generated prompt outputs to render in the **Output** view.
      */
     set promptOutputs(value) {
         this.service.promptOutputs = value;
     }
     /**
-     * Specifies if the rating buttons in each Output view card will be rendered.
-     * By default, rating buttons are not rendered.
-     *
+     * Specifies if the rating buttons appear in each **Output** view card.
+     * By default, the rating buttons do not appear.
      * @default false
      */
     set showOutputRating(value) {
         this.service.showOutputRating = value;
     }
     /**
-     * Fires when the `activeView` property of the component is updated.
-     * Used to provide a two-way binding for the `activeView` property.
+     * Fires when the `activeView` property is updated.
+     * Use this event for two-way binding of the `activeView` property.
      */
     activeViewChange = new EventEmitter();
     /**
-     * Fires each time the user clicks the Prompt view Generate button or the Output view Retry button.
-     * To distinguish the source element, use the event's `isRetry` field.
+     * Fires when the user clicks the **Generate** button in the **Prompt** view or the **Retry** button in the **Output** view.
+     * Use the event's `isRetry` field to determine the source element.
      */
     promptRequest = new EventEmitter();
     /**
-     * Fires each time the user clicks a Command view command. Exposes the selected command as event data.
+     * Fires when the user clicks a **Command** view command.
+     * The event data contains the selected command.
      */
     commandExecute = new EventEmitter();
     /**
-     * Fires each time the user clicks any Output view Copy button.
+     * Fires when the user clicks a **Copy** button in any **Output** view card.
      */
     outputCopy = new EventEmitter();
     /**
-     * Fires each time the user clicks a rating button in any Output view card.
+     * Fires when the user clicks a rating button in any **Output** view card.
      */
     outputRatingChange = new EventEmitter();
     ngAfterViewInit() {
@@ -2338,7 +2392,7 @@ class AIPromptComponent {
         this.subs.unsubscribe();
     }
     /**
-     * Focuses the first focusable element in the AIPrompt.
+     * Focuses the first focusable element in the AIPrompt component.
      */
     focus() {
         this.navigationService.focusFirst();
@@ -2585,7 +2639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The component for rendering the AIPrompt Command View.
+ * Represents the component that renders the **Command** view of the AIPrompt.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt-command-view
+ *      buttonText="My command view">
+ * </kendo-aiprompt-command-view>
+ * ```
  */
 class CommandViewComponent extends BaseView {
     service;
@@ -2667,8 +2728,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 /**
- * Custom component messages override the default component messages.
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ * Represents the custom messages component of the AIPrompt.
+ *
+ * Use this component to override default messages for the AIPrompt
+ * ([see example](slug:globalization_chat#custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt-messages
+ *   promptView="My prompt view"
+ *   outputView="My output view">
+ * </kendo-aiprompt-messages>
+ * ```
  */
 class AIPromptCustomMessagesComponent extends Messages {
     service;
@@ -2703,7 +2774,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * The component for rendering an AIPrompt Custom View.
+ * Represents the component that renders a **Custom** view in the AIPrompt.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt-custom-view [viewTemplate]="customTemplate">
+ * </kendo-aiprompt-custom-view>
+ *
+ * <ng-template #customTemplate>
+ *   <div>Custom content here</div>
+ * </ng-template>
+ * ```
  */
 class CustomViewComponent extends BaseView {
     constructor(localization) {
@@ -2936,7 +3017,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The component for rendering the AIPrompt Output View.
+ * Represents the component that renders the **Output** view of the AIPrompt.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt-output-view
+ *      buttonText="My output view">
+ * </kendo-aiprompt-output-view>
+ * ```
  */
 class OutputViewComponent extends BaseView {
     service;
@@ -2993,7 +3081,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 /**
- * The component for rendering the AIPrompt Prompt View.
+ * Represents the component that renders the **Prompt** view of the AIPrompt.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt-prompt-view
+ *      buttonText="My prompt view">
+ * </kendo-aiprompt-prompt-view>
+ * ```
  */
 class PromptViewComponent extends BaseView {
     service;
@@ -3129,8 +3224,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // eslint-disable no-forward-ref
 /**
- * Custom component messages override default component messages
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ * Represents the custom messages component of the Chat.
+ *
+ * Use this component to override default messages for the Chat
+ * ([see example](slug:globalization_chat#custom-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-chat-messages
+ *   send="Send Message"
+ *   messagePlaceholder="Type here...">
+ * </kendo-chat-messages>
+ * ```
  */
 class CustomMessagesComponent extends Messages$1 {
     service;
@@ -3165,24 +3270,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
+ * Represents a Hero Card component ([see example](slug:dialogflow_chat)).
  * Hero cards host a single large image and action buttons with text content.
+ *
+ * @example
+ * ```html
+ * <kendo-chat-hero-card
+ *   title="Card Title"
+ *   subtitle="Card Subtitle"
+ *   [actions]="actions">
+ * </kendo-chat-hero-card>
+ * ```
  */
 class HeroCardComponent {
     /**
-     * The URL of the hero card image.
+     * Sets the URL of the hero card image.
      */
     imageUrl;
     /**
-     * The title of the hero card.
+     * Sets the title of the hero card.
      */
     title;
     /**
-     * The subtitle of the hero card.
+     * Sets the subtitle of the hero card.
      */
     subtitle;
     /**
-     * An array with the possible quick actions for this hero card.
+     * Sets the array of quick actions for this hero card.
      */
     actions;
     cssClass = true;
@@ -3190,6 +3304,9 @@ class HeroCardComponent {
      * Fires when the user clicks a button.
      */
     executeAction = new EventEmitter();
+    /**
+     * Emits the `executeAction` event when the user clicks an action button.
+     */
     onClick(action) {
         this.executeAction.next(action);
     }
@@ -3264,7 +3381,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all `AIPrompt` related components and directives
+ * Utility array that contains all AIPrompt related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_AIPROMPT } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_AIPROMPT],
+ *   selector: 'my-app',
+ *   template: `<kendo-aiprompt></kendo-aiprompt>`
+ * })
+ * export class AppComponent {}
+ * ```
  */
 const KENDO_AIPROMPT = [
     AIPromptComponent,
@@ -3277,7 +3408,21 @@ const KENDO_AIPROMPT = [
     AIPromptToolbarFocusableDirective
 ];
 /**
- * Utility array that contains all `Chat` related components and directives
+ * Utility array that contains all Chat related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHAT],
+ *   selector: 'my-app',
+ *   template: `<kendo-chat></kendo-chat>`
+ * })
+ * export class AppComponent {}
+ * ```
  */
 const KENDO_CHAT = [
     ChatComponent,
@@ -3288,7 +3433,24 @@ const KENDO_CHAT = [
     ChatMessageBoxTemplateDirective
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives
+ * Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_CONVERSATIONALUI } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CONVERSATIONALUI],
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-aiprompt></kendo-aiprompt>
+ *     <kendo-chat></kendo-chat>
+ *   `
+ * })
+ * export class AppComponent {}
+ * ```
  */
 const KENDO_CONVERSATIONALUI = [
     ...KENDO_AIPROMPT,
@@ -3297,24 +3459,21 @@ const KENDO_CONVERSATIONALUI = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the AIPrompt component.
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the AIPrompt component.
  *
  * @example
- * ```ts-no-run
+ * ```ts
  * import { NgModule } from '@angular/core';
- * import { Component } from '@angular/core';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { AIPromptModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
+ * import { AppComponent } from './app.component';
  *
- * _@NgModule({
- *   imports:      [ BrowserModule, AIPromptModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
+ * @NgModule({
+ *   imports: [BrowserModule, AIPromptModule],
+ *   declarations: [AppComponent],
+ *   bootstrap: [AppComponent]
  * })
- *
- * export class AppModule { }
+ * export class AppModule {}
  * ```
  */
 class AIPromptModule {
@@ -3333,7 +3492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the Chat component.
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Chat component.
  *
  * @example
  * ```ts-no-run
@@ -3342,12 +3501,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * import { BrowserModule } from '@angular/platform-browser';
  *
  * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
+ * import { AppComponent } from './app.component';
  *
  * _@NgModule({
- *   imports:      [ BrowserModule, ChatModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
+ *   imports: [BrowserModule, ChatModule],
+ *   declarations: [AppComponent],
+ *   bootstrap: [AppComponent]
  * })
  *
  * export class AppModule { }
@@ -3369,34 +3528,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
- * definition for the Conversational UI components.
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Conversational UI components.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the Conversational UI module
- * import { ConversationalUIModule } from '@progress/kendo-angular-conversational-ui';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { ConversationalUIModule } from '@progress/kendo-angular-conversational-ui';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, ConversationalUIModule], // import Conversational UI module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ConversationalUIModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class ConversationalUIModule {