feat: middleware handler API improvement (#1523)

Author: MartinCupela

src/messageComposer/configuration/types.ts

@@ -34,7 +34,7 @@ export type AttachmentManagerConfig = {
   maxNumberOfFilesPerMessage: number;
   /**
    * Array of one or more file types, or unique file type specifiers (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept#unique_file_type_specifiers),
-   * describing which file types to allow to select when uploading files.
+   * describing which file types are allowed to be selected when uploading files.
    */
   acceptedFiles: string[];
   // todo: refactor this. We want a pipeline where it would be possible to customize the preparation, upload, and post-upload steps.

src/messageComposer/index.ts

@@ -9,3 +9,4 @@ export * from './middleware';
 export * from './pollComposer';
 export * from './textComposer';
 export * from './types';
+export type { CustomTextComposerSuggestion } from './types.custom';

src/messageComposer/linkPreviewsManager.ts

@@ -18,7 +18,7 @@ export interface ILinkPreviewsManager {
 }
 
 export enum LinkPreviewStatus {
-  /** Link preview has been dismissed using MessageInputContextValue.dismissLinkPreview **/
+  /** Link preview has been dismissed using **/
   DISMISSED = 'dismissed',
   /** Link preview could not be loaded, the enrichment request has failed. **/
   FAILED = 'failed',

src/messageComposer/messageComposer.ts

@@ -563,8 +563,9 @@ export class MessageComposer {
   compose = async (): Promise<MessageComposerMiddlewareValue['state'] | undefined> => {
     const created_at = this.editedMessage?.created_at ?? new Date();
     const text = '';
-    const result = await this.compositionMiddlewareExecutor.execute('compose', {
-      state: {
+    const result = await this.compositionMiddlewareExecutor.execute({
+      eventName: 'compose',
+      initialValue: {
         message: {
           id: this.id,
           parent_id: this.threadId ?? undefined,
@@ -594,14 +595,12 @@ export class MessageComposer {
   };
 
   composeDraft = async () => {
-    const { state, status } = await this.draftCompositionMiddlewareExecutor.execute(
-      'compose',
-      {
-        state: {
-          draft: { id: this.id, parent_id: this.threadId ?? undefined, text: '' },
-        },
+    const { state, status } = await this.draftCompositionMiddlewareExecutor.execute({
+      eventName: 'compose',
+      initialValue: {
+        draft: { id: this.id, parent_id: this.threadId ?? undefined, text: '' },
       },
-    );
+    });
     if (status === 'discard') return;
     return state;
   };

src/messageComposer/middleware/messageComposer/MessageComposerMiddlewareExecutor.ts

@@ -22,7 +22,7 @@ import {
 import { createCompositionDataCleanupMiddleware } from './cleanData';
 import type {
   MessageComposerMiddlewareExecutorOptions,
-  MessageComposerMiddlewareValueState,
+  MessageComposerMiddlewareState,
   MessageDraftComposerMiddlewareExecutorOptions,
   MessageDraftComposerMiddlewareValueState,
 } from './types';
@@ -31,7 +31,10 @@ import {
   createDraftCustomDataCompositionMiddleware,
 } from './customData';
 
-export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<MessageComposerMiddlewareValueState> {
+export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<
+  MessageComposerMiddlewareState,
+  'compose'
+> {
   constructor({ composer }: MessageComposerMiddlewareExecutorOptions) {
     super();
     // todo: document how to add custom data to a composed message using middleware
@@ -48,7 +51,10 @@ export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<Messag
   }
 }
 
-export class MessageDraftComposerMiddlewareExecutor extends MiddlewareExecutor<MessageDraftComposerMiddlewareValueState> {
+export class MessageDraftComposerMiddlewareExecutor extends MiddlewareExecutor<
+  MessageDraftComposerMiddlewareValueState,
+  'compose'
+> {
   constructor({ composer }: MessageDraftComposerMiddlewareExecutorOptions) {
     super();
     // todo: document how to add custom data to a composed message using middleware

src/messageComposer/middleware/messageComposer/attachments.ts

@@ -3,8 +3,10 @@ import type { Attachment } from '../../../types';
 import type { MessageComposer } from '../../messageComposer';
 import type { LocalAttachment } from '../../types';
 import type {
-  MessageComposerMiddlewareValueState,
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
   MessageDraftComposerMiddlewareValueState,
+  MessageDraftCompositionMiddleware,
 } from './types';
 
 const localAttachmentToAttachment = (localAttachment: LocalAttachment) => {
@@ -13,77 +15,80 @@ const localAttachmentToAttachment = (localAttachment: LocalAttachment) => {
   return attachment as Attachment;
 };
 
-export const createAttachmentsCompositionMiddleware = (composer: MessageComposer) => ({
+export const createAttachmentsCompositionMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
   id: 'stream-io/message-composer-middleware/attachments',
-  compose: ({
-    input,
-    nextHandler,
-  }: MiddlewareHandlerParams<MessageComposerMiddlewareValueState>) => {
-    const { attachmentManager } = composer;
-    if (!attachmentManager) return nextHandler(input);
+  handlers: {
+    compose: ({
+      state,
+      next,
+      discard,
+      forward,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const { attachmentManager } = composer;
+      if (!attachmentManager) return forward();
 
-    if (attachmentManager.uploadsInProgressCount > 0) {
-      composer.client.notifications.addWarning({
-        message: 'Wait until all attachments have uploaded',
-        origin: {
-          emitter: 'MessageComposer',
-          context: { composer },
-        },
-      });
-      return nextHandler({ ...input, status: 'discard' });
-    }
+      if (attachmentManager.uploadsInProgressCount > 0) {
+        composer.client.notifications.addWarning({
+          message: 'Wait until all attachments have uploaded',
+          origin: {
+            emitter: 'MessageComposer',
+            context: { composer },
+          },
+        });
+        return discard();
+      }
 
-    const attachments = (input.state.message.attachments ?? []).concat(
-      attachmentManager.successfulUploads.map(localAttachmentToAttachment),
-    );
+      const attachments = (state.message.attachments ?? []).concat(
+        attachmentManager.successfulUploads.map(localAttachmentToAttachment),
+      );
 
-    // prevent introducing attachments array into the payload sent to the server
-    if (!attachments.length) return nextHandler(input);
+      // prevent introducing attachments array into the payload sent to the server
+      if (!attachments.length) return forward();
 
-    return nextHandler({
-      ...input,
-      state: {
-        ...input.state,
+      return next({
+        ...state,
         localMessage: {
-          ...input.state.localMessage,
+          ...state.localMessage,
           attachments,
         },
         message: {
-          ...input.state.message,
+          ...state.message,
           attachments,
         },
-      },
-    });
+      });
+    },
   },
 });
 
 export const createDraftAttachmentsCompositionMiddleware = (
   composer: MessageComposer,
-) => ({
+): MessageDraftCompositionMiddleware => ({
   id: 'stream-io/message-composer-middleware/draft-attachments',
-  compose: ({
-    input,
-    nextHandler,
-  }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
-    const { attachmentManager } = composer;
-    if (!attachmentManager) return nextHandler(input);
+  handlers: {
+    compose: ({
+      state,
+      next,
+      forward,
+    }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+      const { attachmentManager } = composer;
+      if (!attachmentManager) return forward();
 
-    const successfulUploads = attachmentManager.successfulUploads;
-    const attachments = successfulUploads.length
-      ? (input.state.draft.attachments ?? []).concat(
-          successfulUploads.map(localAttachmentToAttachment),
-        )
-      : undefined;
+      const successfulUploads = attachmentManager.successfulUploads;
+      const attachments = successfulUploads.length
+        ? (state.draft.attachments ?? []).concat(
+            successfulUploads.map(localAttachmentToAttachment),
+          )
+        : undefined;
 
-    return nextHandler({
-      ...input,
-      state: {
-        ...input.state,
+      return next({
+        ...state,
         draft: {
-          ...input.state.draft,
+          ...state.draft,
           attachments,
         },
-      },
-    });
+      });
+    },
   },
 });

src/messageComposer/middleware/messageComposer/cleanData.ts

@@ -1,42 +1,46 @@
 import type { MiddlewareHandlerParams } from '../../../middleware';
 import { formatMessage, toUpdatedMessagePayload } from '../../../utils';
 import type { MessageComposer } from '../../messageComposer';
-import type { MessageComposerMiddlewareValueState } from './types';
+import type {
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+} from './types';
 
-export const createCompositionDataCleanupMiddleware = (composer: MessageComposer) => ({
+export const createCompositionDataCleanupMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
   id: 'stream-io/message-composer-middleware/data-cleanup',
-  compose: ({
-    input,
-    nextHandler,
-  }: MiddlewareHandlerParams<MessageComposerMiddlewareValueState>) => {
-    const common = {
-      type: composer.editedMessage?.type ?? 'regular',
-    };
+  handlers: {
+    compose: ({
+      state,
+      next,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const common = {
+        type: composer.editedMessage?.type ?? 'regular',
+      };
 
-    const editedMessagePayloadToBeSent = composer.editedMessage
-      ? toUpdatedMessagePayload(composer.editedMessage)
-      : undefined;
+      const editedMessagePayloadToBeSent = composer.editedMessage
+        ? toUpdatedMessagePayload(composer.editedMessage)
+        : undefined;
 
-    return nextHandler({
-      ...input,
-      state: {
-        ...input.state,
+      return next({
+        ...state,
         localMessage: formatMessage({
           ...composer.editedMessage,
-          ...input.state.localMessage,
+          ...state.localMessage,
           ...common,
           user: composer.client.user,
         }),
         message: {
           ...editedMessagePayloadToBeSent,
-          ...input.state.message,
+          ...state.message,
           ...common,
         },
         sendOptions:
-          composer.editedMessage && input.state.sendOptions?.skip_enrich_url
-            ? { skip_enrich_url: input.state.sendOptions?.skip_enrich_url }
-            : input.state.sendOptions,
-      },
-    });
+          composer.editedMessage && state.sendOptions?.skip_enrich_url
+            ? { skip_enrich_url: state.sendOptions?.skip_enrich_url }
+            : state.sendOptions,
+      });
+    },
   },
 });