Chat: Add generic attachments

Author: Ruslan Farkhutdinov

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

@@ -21,6 +21,7 @@ import {
     QueryList
 } from '@angular/core';
 
+export { ExplicitTypes } from 'devextreme/ui/chat';
 
 import DataSource from 'devextreme/data/data_source';
 import dxChat from 'devextreme/ui/chat';
@@ -88,7 +89,7 @@ import {
         IterableDifferHelper
     ]
 })
-export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+export class DxChatComponent<TAttachment = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
 
     @ContentChildren(PROPERTY_TOKEN_alerts)
     set _alertsContentChildren(value: QueryList<CollectionNestedOption>) {
@@ -110,7 +111,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this.setChildren('typingUsers', value);
     }
 
-    instance: DxChat = null;
+    instance: DxChat<TAttachment> = null;
 
     /**
      * [descr:WidgetOptions.accessKey]

packages/devextreme-react/src/chat.ts

@@ -1,4 +1,5 @@
 "use client"
+export { ExplicitTypes } from "devextreme/ui/chat";
 import * as React from "react";
 import { memo, forwardRef, useImperativeHandle, useRef, useMemo, ForwardedRef, Ref, ReactElement } from "react";
 import dxChat, {
@@ -18,22 +19,23 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
 }
 
-type IChatOptionsNarrowedEvents = {
-  onAttachmentDownload?: ((e: AttachmentDownloadEvent) => void) | undefined;
-  onDisposing?: ((e: DisposingEvent) => void);
-  onInitialized?: ((e: InitializedEvent) => void);
-  onMessageDeleted?: ((e: MessageDeletedEvent) => void) | undefined;
-  onMessageDeleting?: ((e: MessageDeletingEvent) => void) | undefined;
-  onMessageEditCanceled?: ((e: MessageEditCanceledEvent) => void) | undefined;
-  onMessageEditingStart?: ((e: MessageEditingStartEvent) => void) | undefined;
-  onMessageEntered?: ((e: MessageEnteredEvent) => void) | undefined;
-  onMessageUpdated?: ((e: MessageUpdatedEvent) => void) | undefined;
-  onMessageUpdating?: ((e: MessageUpdatingEvent) => void) | undefined;
-  onTypingEnd?: ((e: TypingEndEvent) => void) | undefined;
-  onTypingStart?: ((e: TypingStartEvent) => void) | undefined;
+type IChatOptionsNarrowedEvents<TAttachment = any> = {
+  onAttachmentDownload?: ((e: AttachmentDownloadEvent<TAttachment>) => void) | undefined;
+  onDisposing?: ((e: DisposingEvent<TAttachment>) => void);
+  onInitialized?: ((e: InitializedEvent<TAttachment>) => void);
+  onMessageDeleted?: ((e: MessageDeletedEvent<TAttachment>) => void) | undefined;
+  onMessageDeleting?: ((e: MessageDeletingEvent<TAttachment>) => void) | undefined;
+  onMessageEditCanceled?: ((e: MessageEditCanceledEvent<TAttachment>) => void) | undefined;
+  onMessageEditingStart?: ((e: MessageEditingStartEvent<TAttachment>) => void) | undefined;
+  onMessageEntered?: ((e: MessageEnteredEvent<TAttachment>) => void) | undefined;
+  onMessageUpdated?: ((e: MessageUpdatedEvent<TAttachment>) => void) | undefined;
+  onMessageUpdating?: ((e: MessageUpdatingEvent<TAttachment>) => void) | undefined;
+  onTypingEnd?: ((e: TypingEndEvent<TAttachment>) => void) | undefined;
+  onTypingStart?: ((e: TypingStartEvent<TAttachment>) => void) | undefined;
 }
 
-type IChatOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IChatOptionsNarrowedEvents> & IHtmlOptions & {
+type IChatOptions<TAttachment = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TAttachment>, IChatOptionsNarrowedEvents<TAttachment>> & IHtmlOptions & {
+  dataSource?: Properties<TAttachment>["dataSource"];
   emptyViewRender?: (...params: any) => React.ReactNode;
   emptyViewComponent?: React.ComponentType<any>;
   messageRender?: (...params: any) => React.ReactNode;
@@ -42,13 +44,13 @@ type IChatOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IChatO
   onItemsChange?: (value: Array<Message>) => void;
 }>
 
-interface ChatRef {
-  instance: () => dxChat;
+interface ChatRef<TAttachment = any> {
+  instance: () => dxChat<TAttachment>;
 }
 
 const Chat = memo(
   forwardRef(
-    (props: React.PropsWithChildren<IChatOptions>, ref: ForwardedRef<ChatRef>) => {
+    <TAttachment = any>(props: React.PropsWithChildren<IChatOptions<TAttachment>>, ref: ForwardedRef<ChatRef<TAttachment>>) => {
       const baseRef = useRef<ComponentRef>(null);
 
       useImperativeHandle(ref, () => (
@@ -91,7 +93,7 @@ const Chat = memo(
       ]), []);
 
       return (
-        React.createElement(BaseComponent<React.PropsWithChildren<IChatOptions>>, {
+        React.createElement(BaseComponent<React.PropsWithChildren<IChatOptions<TAttachment>>>, {
           WidgetClass: dxChat,
           ref: baseRef,
           subscribableOptions,
@@ -104,7 +106,7 @@ const Chat = memo(
       );
     },
   ),
-) as (props: React.PropsWithChildren<IChatOptions> & { ref?: Ref<ChatRef> }) => ReactElement | null;
+) as <TAttachment = any>(props: React.PropsWithChildren<IChatOptions<TAttachment>> & { ref?: Ref<ChatRef<TAttachment>> }) => ReactElement | null;
 
 
 // owners:

packages/devextreme-vue/src/chat.ts

@@ -1,3 +1,4 @@
+export { ExplicitTypes } from "devextreme/ui/chat";
 import { PropType } from "vue";
 import { defineComponent } from "vue";
 import { prepareComponentConfig } from "./core/index";