Chat: Add suggestions

packages/devextreme-angular/src/core/tokens/index.ts

@@ -18,6 +18,7 @@ export const PROPERTY_TOKEN_strips = new InjectionToken<string>('property-token-
 export const PROPERTY_TOKEN_valueAxis = new InjectionToken<string>('property-token-valueAxis');
 export const PROPERTY_TOKEN_alerts = new InjectionToken<string>('property-token-alerts');
 export const PROPERTY_TOKEN_attachments = new InjectionToken<string>('property-token-attachments');
+export const PROPERTY_TOKEN_suggestions = new InjectionToken<string>('property-token-suggestions');
 export const PROPERTY_TOKEN_typingUsers = new InjectionToken<string>('property-token-typingUsers');
 export const PROPERTY_TOKEN_ranges = new InjectionToken<string>('property-token-ranges');
 export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');

packages/devextreme-angular/src/ui/chat/index.ts

@@ -24,7 +24,7 @@ import {
 
 import DataSource from 'devextreme/data/data_source';
 import dxChat from 'devextreme/ui/chat';
-import { Alert, Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
+import { Alert, Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, SuggestionClickEvent, TypingEndEvent, TypingStartEvent, Suggestion, User } from 'devextreme/ui/chat';
 import { DataSourceOptions } from 'devextreme/data/data_source';
 import { Store } from 'devextreme/data/store';
 import { Format } from 'devextreme/common/core/localization';
@@ -50,6 +50,7 @@ import { DxoEditingModule } from 'devextreme-angular/ui/nested';
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 import { DxoAuthorModule } from 'devextreme-angular/ui/nested';
 import { DxoMessageTimestampFormatModule } from 'devextreme-angular/ui/nested';
+import { DxiSuggestionModule } from 'devextreme-angular/ui/nested';
 import { DxiTypingUserModule } from 'devextreme-angular/ui/nested';
 import { DxoUserModule } from 'devextreme-angular/ui/nested';
 
@@ -61,12 +62,14 @@ import { DxoChatEditingModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatFileUploaderOptionsModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatItemModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatMessageTimestampFormatModule } from 'devextreme-angular/ui/chat/nested';
+import { DxiChatSuggestionModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatTypingUserModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatUserModule } from 'devextreme-angular/ui/chat/nested';
 import { 
            PROPERTY_TOKEN_alerts,
            PROPERTY_TOKEN_attachments,
            PROPERTY_TOKEN_items,
+           PROPERTY_TOKEN_suggestions,
            PROPERTY_TOKEN_typingUsers,
      } from 'devextreme-angular/core/tokens';
 
@@ -105,6 +108,11 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this.setChildren('items', value);
     }
 
+    @ContentChildren(PROPERTY_TOKEN_suggestions)
+    set _suggestionsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('suggestions', value);
+    }
+
     @ContentChildren(PROPERTY_TOKEN_typingUsers)
     set _typingUsersContentChildren(value: QueryList<CollectionNestedOption>) {
         this.setChildren('typingUsers', value);
@@ -304,6 +312,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.messageBoxValue]
+
+     */
+    @Input()
+    get messageBoxValue(): string {
+        return this._getOption('messageBoxValue');
+    }
+    set messageBoxValue(value: string) {
+        this._setOption('messageBoxValue', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.messageTemplate]
 
@@ -408,6 +429,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.suggestions]
+
+     */
+    @Input()
+    get suggestions(): Array<Suggestion> {
+        return this._getOption('suggestions');
+    }
+    set suggestions(value: Array<Suggestion>) {
+        this._setOption('suggestions', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.typingUsers]
 
@@ -547,6 +581,14 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;
 
+    /**
+
+     * [descr:dxChatOptions.onSuggestionClick]
+
+
+     */
+    @Output() onSuggestionClick: EventEmitter<SuggestionClickEvent>;
+
     /**
 
      * [descr:dxChatOptions.onTypingEnd]
@@ -668,6 +710,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() itemsChange: EventEmitter<Array<Message>>;
 
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() messageBoxValueChange: EventEmitter<string>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -724,6 +773,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() showUserNameChange: EventEmitter<boolean>;
 
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() suggestionsChange: EventEmitter<Array<Suggestion>>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -776,6 +832,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { subscribe: 'messageUpdated', emit: 'onMessageUpdated' },
             { subscribe: 'messageUpdating', emit: 'onMessageUpdating' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { subscribe: 'suggestionClick', emit: 'onSuggestionClick' },
             { subscribe: 'typingEnd', emit: 'onTypingEnd' },
             { subscribe: 'typingStart', emit: 'onTypingStart' },
             { emit: 'accessKeyChange' },
@@ -793,6 +850,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hintChange' },
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
+            { emit: 'messageBoxValueChange' },
             { emit: 'messageTemplateChange' },
             { emit: 'messageTimestampFormatChange' },
             { emit: 'reloadOnChangeChange' },
@@ -801,6 +859,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'showDayHeadersChange' },
             { emit: 'showMessageTimestampChange' },
             { emit: 'showUserNameChange' },
+            { emit: 'suggestionsChange' },
             { emit: 'typingUsersChange' },
             { emit: 'userChange' },
             { emit: 'visibleChange' },
@@ -826,6 +885,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this.setupChanges('alerts', changes);
         this.setupChanges('dataSource', changes);
         this.setupChanges('items', changes);
+        this.setupChanges('suggestions', changes);
         this.setupChanges('typingUsers', changes);
     }
 
@@ -839,6 +899,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this._idh.doCheck('alerts');
         this._idh.doCheck('dataSource');
         this._idh.doCheck('items');
+        this._idh.doCheck('suggestions');
         this._idh.doCheck('typingUsers');
         this._watcherHelper.checkWatchers();
         super.ngDoCheck();
@@ -864,6 +925,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiItemModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
+    DxiSuggestionModule,
     DxiTypingUserModule,
     DxoUserModule,
     DxiChatAlertModule,
@@ -874,6 +936,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
+    DxiChatSuggestionModule,
     DxiChatTypingUserModule,
     DxoChatUserModule,
     DxIntegrationModule,
@@ -887,6 +950,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiItemModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
+    DxiSuggestionModule,
     DxiTypingUserModule,
     DxoUserModule,
     DxiChatAlertModule,
@@ -897,6 +961,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
+    DxiChatSuggestionModule,
     DxiChatTypingUserModule,
     DxoChatUserModule,
     DxTemplateModule

packages/devextreme-angular/src/ui/chat/nested/index.ts

@@ -6,6 +6,7 @@ export * from './editing';
 export * from './file-uploader-options';
 export * from './item-dxi';
 export * from './message-timestamp-format';
+export * from './suggestion-dxi';
 export * from './typing-user-dxi';
 export * from './user';
 

packages/devextreme-angular/src/ui/chat/nested/suggestion-dxi.ts

@@ -0,0 +1,76 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { CollectionNestedOption } from 'devextreme-angular/core';
+
+import { PROPERTY_TOKEN_suggestions } from 'devextreme-angular/core/tokens';
+
+@Component({
+    selector: 'dxi-chat-suggestion',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [
+        NestedOptionHost,
+        {
+           provide: PROPERTY_TOKEN_suggestions,
+           useExisting: DxiChatSuggestionComponent,
+        }
+    ]
+})
+export class DxiChatSuggestionComponent extends CollectionNestedOption {
+    @Input()
+    get text(): string {
+        return this._getOption('text');
+    }
+    set text(value: string) {
+        this._setOption('text', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'suggestions';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  imports: [
+    DxiChatSuggestionComponent
+  ],
+  exports: [
+    DxiChatSuggestionComponent
+  ],
+})
+export class DxiChatSuggestionModule { }

packages/devextreme-angular/src/ui/nested/base/index.ts

@@ -50,6 +50,7 @@ export * from './search-panel';
 export * from './sortable-options';
 export * from './sorting';
 export * from './splitter-options';
+export * from './suggestion-dxi';
 export * from './tab-panel-options';
 export * from './text-box-options';
 export * from './text-editor-button-dxi';

packages/devextreme-angular/src/ui/nested/base/suggestion-dxi.ts

@@ -0,0 +1,19 @@
+/* tslint:disable:max-line-length */
+
+import { CollectionNestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxiSuggestion extends CollectionNestedOption {
+    get text(): string {
+        return this._getOption('text');
+    }
+    set text(value: string) {
+        this._setOption('text', value);
+    }
+}

packages/devextreme-angular/src/ui/nested/index.ts

@@ -211,6 +211,7 @@ export * from './strip-line-dxi';
 export * from './strip-style';
 export * from './subtitle';
 export * from './subvalue-indicator';
+export * from './suggestion-dxi';
 export * from './summary';
 export * from './tab-dxi';
 export * from './tab-panel-options';

packages/devextreme-angular/src/ui/nested/suggestion-dxi.ts

@@ -0,0 +1,71 @@
+/* tslint:disable:max-line-length */
+
+/* tslint:disable:use-input-property-decorator */
+
+import {
+    Component,
+    NgModule,
+    Host,
+    SkipSelf
+} from '@angular/core';
+
+
+
+
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { DxiSuggestion } from './base/suggestion-dxi';
+
+import { PROPERTY_TOKEN_suggestions } from 'devextreme-angular/core/tokens';
+
+@Component({
+    selector: 'dxi-suggestion',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [
+        NestedOptionHost,
+        {
+           provide: PROPERTY_TOKEN_suggestions,
+           useExisting: DxiSuggestionComponent,
+        }
+    ],
+    inputs: [
+        'text'
+    ]
+})
+export class DxiSuggestionComponent extends DxiSuggestion {
+
+    protected get _optionPath() {
+        return 'suggestions';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  imports: [
+    DxiSuggestionComponent
+  ],
+  exports: [
+    DxiSuggestionComponent
+  ],
+})
+export class DxiSuggestionModule { }