Chat: Add sendButtonOptions to .d.ts (#33122)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

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

@@ -22,7 +22,7 @@ import {
 } from '@angular/core';
 
 
-import type { default as dxChat, Alert, Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, InputFieldTextChangedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
+import type { default as dxChat, Alert, Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, InputFieldTextChangedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, SendButtonProperties, User } from 'devextreme/ui/chat';
 import type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';
 import type { Store } from 'devextreme/data/store';
 import type { Format } from 'devextreme/common/core/localization';
@@ -61,6 +61,7 @@ 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 { DxoChatSendButtonOptionsModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatSpeechRecognitionConfigModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatSpeechToTextOptionsModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatTypingUserModule } from 'devextreme-angular/ui/chat/nested';
@@ -368,6 +369,16 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    
+    @Input()
+    get sendButtonOptions(): SendButtonProperties {
+        return this._getOption('sendButtonOptions');
+    }
+    set sendButtonOptions(value: SendButtonProperties) {
+        this._setOption('sendButtonOptions', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.showAvatar]
     
@@ -746,6 +757,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() rtlEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() sendButtonOptionsChange: EventEmitter<SendButtonProperties>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -863,6 +881,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'messageTimestampFormatChange' },
             { emit: 'reloadOnChangeChange' },
             { emit: 'rtlEnabledChange' },
+            { emit: 'sendButtonOptionsChange' },
             { emit: 'showAvatarChange' },
             { emit: 'showDayHeadersChange' },
             { emit: 'showMessageTimestampChange' },
@@ -943,6 +962,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
+    DxoChatSendButtonOptionsModule,
     DxoChatSpeechRecognitionConfigModule,
     DxoChatSpeechToTextOptionsModule,
     DxiChatTypingUserModule,
@@ -969,6 +989,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
+    DxoChatSendButtonOptionsModule,
     DxoChatSpeechRecognitionConfigModule,
     DxoChatSpeechToTextOptionsModule,
     DxiChatTypingUserModule,

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

@@ -7,6 +7,7 @@ export * from './editing';
 export * from './file-uploader-options';
 export * from './item-dxi';
 export * from './message-timestamp-format';
+export * from './send-button-options';
 export * from './speech-recognition-config';
 export * from './speech-to-text-options';
 export * from './typing-user-dxi';

packages/devextreme-angular/src/ui/chat/nested/send-button-options.ts

@@ -0,0 +1,92 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import type { SendButtonAction, SendButtonClickEvent } from 'devextreme/ui/chat';
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-chat-send-button-options',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoChatSendButtonOptionsComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get action(): SendButtonAction {
+        return this._getOption('action');
+    }
+    set action(value: SendButtonAction) {
+        this._setOption('action', value);
+    }
+
+    @Input()
+    get icon(): string {
+        return this._getOption('icon');
+    }
+    set icon(value: string) {
+        this._setOption('icon', value);
+    }
+
+    @Input()
+    get onClick(): ((e: SendButtonClickEvent) => void) {
+        return this._getOption('onClick');
+    }
+    set onClick(value: ((e: SendButtonClickEvent) => void)) {
+        this._setOption('onClick', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'sendButtonOptions';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  imports: [
+    DxoChatSendButtonOptionsComponent
+  ],
+  exports: [
+    DxoChatSendButtonOptionsComponent
+  ],
+})
+export class DxoChatSendButtonOptionsModule { }

packages/devextreme-metadata/make-angular-metadata.ts

@@ -51,7 +51,7 @@ Ng.makeMetadata({
     removeMembers(/\/card_view:/),
     removeMembers(/\/chat:TextMessage.attachments/),
     removeMembers(
-      /\/chat:dxChatOptions\.(fileUploaderOptions|inputFieldText|onAttachmentDownloadClick|speechToTextOptions)/,
+      /\/chat:dxChatOptions\.(fileUploaderOptions|inputFieldText|sendButtonOptions|speechToTextOptions|onAttachmentDownloadClick)/,
     ),
     removeMembers(/\/form:dxFormOptions\.(aiIntegration|onSmartPasting|onSmartPasted|smartPaste)/),
     removeMembers(/\/form:dxFormSimpleItem\.aiOptions/),

packages/devextreme-react/src/chat.ts

@@ -8,7 +8,7 @@ import dxChat, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, TypingEndEvent, TypingStartEvent, Attachment as ChatAttachment, User as ChatUser } from "devextreme/ui/chat";
+import type { Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, TypingEndEvent, TypingStartEvent, Attachment as ChatAttachment, User as ChatUser, SendButtonAction, SendButtonClickEvent } from "devextreme/ui/chat";
 import type { DisposingEvent as FileUploaderDisposingEvent, InitializedEvent as FileUploaderInitializedEvent, BeforeSendEvent, ContentReadyEvent, DropZoneEnterEvent, DropZoneLeaveEvent, FilesUploadedEvent, OptionChangedEvent, ProgressEvent, UploadAbortedEvent, UploadedEvent, UploadErrorEvent, UploadStartedEvent, ValueChangedEvent, UploadHttpMethod, FileUploadMode } from "devextreme/ui/file_uploader";
 import type { DisposingEvent as SpeechToTextDisposingEvent, InitializedEvent as SpeechToTextInitializedEvent, ContentReadyEvent as SpeechToTextContentReadyEvent, OptionChangedEvent as SpeechToTextOptionChangedEvent, CustomSpeechRecognizer as SpeechToTextCustomSpeechRecognizer, EndEvent, ErrorEvent, ResultEvent, StartClickEvent, StopClickEvent, SpeechRecognitionConfig as SpeechToTextSpeechRecognitionConfig } from "devextreme/ui/speech_to_text";
 import type { Format, ValidationStatus, ButtonStyle, ButtonType } from "devextreme/common";
@@ -74,6 +74,7 @@ const Chat = memo(
         fileUploaderOptions: { optionName: "fileUploaderOptions", isCollectionItem: false },
         item: { optionName: "items", isCollectionItem: true },
         messageTimestampFormat: { optionName: "messageTimestampFormat", isCollectionItem: false },
+        sendButtonOptions: { optionName: "sendButtonOptions", isCollectionItem: false },
         speechToTextOptions: { optionName: "speechToTextOptions", isCollectionItem: false },
         typingUser: { optionName: "typingUsers", isCollectionItem: true },
         user: { optionName: "user", isCollectionItem: false }
@@ -372,6 +373,26 @@ const MessageTimestampFormat = Object.assign<typeof _componentMessageTimestampFo
   componentType: "option",
 });
 
+// owners:
+// Chat
+type ISendButtonOptionsProps = React.PropsWithChildren<{
+  action?: SendButtonAction;
+  icon?: string;
+  onClick?: ((e: SendButtonClickEvent) => void);
+}>
+const _componentSendButtonOptions = (props: ISendButtonOptionsProps) => {
+  return React.createElement(NestedOption<ISendButtonOptionsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "sendButtonOptions",
+    },
+  });
+};
+
+const SendButtonOptions = Object.assign<typeof _componentSendButtonOptions, NestedComponentMeta>(_componentSendButtonOptions, {
+  componentType: "option",
+});
+
 // owners:
 // SpeechToTextOptions
 type ISpeechRecognitionConfigProps = React.PropsWithChildren<{
@@ -510,6 +531,8 @@ export {
   IItemProps,
   MessageTimestampFormat,
   IMessageTimestampFormatProps,
+  SendButtonOptions,
+  ISendButtonOptionsProps,
   SpeechRecognitionConfig,
   ISpeechRecognitionConfigProps,
   SpeechToTextOptions,

packages/devextreme-vue/src/chat.ts

@@ -22,8 +22,11 @@ import {
  OptionChangedEvent,
  TypingEndEvent,
  TypingStartEvent,
+ SendButtonProperties,
  User,
  Attachment,
+ SendButtonAction,
+ SendButtonClickEvent,
 } from "devextreme/ui/chat";
 import {
  DataSourceOptions,
@@ -110,6 +113,7 @@ type AccessibleOptions = Pick<Properties,
   "onTypingStart" |
   "reloadOnChange" |
   "rtlEnabled" |
+  "sendButtonOptions" |
   "showAvatar" |
   "showDayHeaders" |
   "showMessageTimestamp" |
@@ -162,6 +166,7 @@ const componentConfig = {
     onTypingStart: Function as PropType<((e: TypingStartEvent) => void)>,
     reloadOnChange: Boolean,
     rtlEnabled: Boolean,
+    sendButtonOptions: Object as PropType<SendButtonProperties | Record<string, any>>,
     showAvatar: Boolean,
     showDayHeaders: Boolean,
     showMessageTimestamp: Boolean,
@@ -210,6 +215,7 @@ const componentConfig = {
     "update:onTypingStart": null,
     "update:reloadOnChange": null,
     "update:rtlEnabled": null,
+    "update:sendButtonOptions": null,
     "update:showAvatar": null,
     "update:showDayHeaders": null,
     "update:showMessageTimestamp": null,
@@ -236,6 +242,7 @@ const componentConfig = {
       fileUploaderOptions: { isCollectionItem: false, optionName: "fileUploaderOptions" },
       item: { isCollectionItem: true, optionName: "items" },
       messageTimestampFormat: { isCollectionItem: false, optionName: "messageTimestampFormat" },
+      sendButtonOptions: { isCollectionItem: false, optionName: "sendButtonOptions" },
       speechToTextOptions: { isCollectionItem: false, optionName: "speechToTextOptions" },
       typingUser: { isCollectionItem: true, optionName: "typingUsers" },
       user: { isCollectionItem: false, optionName: "user" }
@@ -586,6 +593,27 @@ const DxMessageTimestampFormat = defineComponent(DxMessageTimestampFormatConfig)
 
 (DxMessageTimestampFormat as any).$_optionName = "messageTimestampFormat";
 
+const DxSendButtonOptionsConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:action": null,
+    "update:icon": null,
+    "update:onClick": null,
+  },
+  props: {
+    action: String as PropType<SendButtonAction>,
+    icon: String,
+    onClick: Function as PropType<((e: SendButtonClickEvent) => void)>
+  }
+};
+
+prepareConfigurationComponentConfig(DxSendButtonOptionsConfig);
+
+const DxSendButtonOptions = defineComponent(DxSendButtonOptionsConfig);
+
+(DxSendButtonOptions as any).$_optionName = "sendButtonOptions";
+
 const DxSpeechRecognitionConfigConfig = {
   emits: {
     "update:isActive": null,
@@ -747,6 +775,7 @@ export {
   DxFileUploaderOptions,
   DxItem,
   DxMessageTimestampFormat,
+  DxSendButtonOptions,
   DxSpeechRecognitionConfig,
   DxSpeechToTextOptions,
   DxTypingUser,