feat: add custom data message composer

Author: MartinCupela

src/messageComposer/CustomDataManager.ts

@@ -0,0 +1,49 @@
+import type { CustomMessageData, DraftMessage, LocalMessage } from '..';
+import { StateStore } from '..';
+import type { MessageComposer } from './messageComposer';
+
+export type CustomDataManagerState = {
+  data: CustomMessageData;
+};
+
+export type CustomDataManagerOptions = {
+  composer: MessageComposer;
+  message?: DraftMessage | LocalMessage;
+};
+
+const initState = (options: CustomDataManagerOptions): CustomDataManagerState => {
+  if (!options) return { data: {} as CustomMessageData };
+  return { data: {} as CustomMessageData };
+};
+
+export class CustomDataManager {
+  composer: MessageComposer;
+  state: StateStore<CustomDataManagerState>;
+
+  constructor({ composer, message }: CustomDataManagerOptions) {
+    this.composer = composer;
+    this.state = new StateStore<CustomDataManagerState>(initState({ composer, message }));
+  }
+
+  get data() {
+    return this.state.getLatestValue().data;
+  }
+
+  isDataEqual = (
+    nextState: CustomDataManagerState,
+    previousState?: CustomDataManagerState,
+  ) => JSON.stringify(nextState.data) === JSON.stringify(previousState?.data);
+
+  initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
+    this.state.next(initState({ composer: this.composer, message }));
+  };
+
+  setData(data: Partial<CustomMessageData>) {
+    this.state.partialNext({
+      data: {
+        ...this.state.getLatestValue().data,
+        ...data,
+      },
+    });
+  }
+}

src/messageComposer/configuration/types.ts

@@ -1,7 +1,12 @@
 import type { LinkPreview } from '../linkPreviewsManager';
 import type { FileUploadFilter } from '../attachmentManager';
 import type { FileLike, FileReference } from '../types';
-import type { StreamChat } from '../../client';
+
+export type MinimumUploadRequestResult = { file: string; thumb_url?: string };
+
+export type UploadRequestFn = (
+  fileLike: FileReference | FileLike,
+) => Promise<MinimumUploadRequestResult>;
 
 export type DraftsConfiguration = {
   enabled: boolean;
@@ -23,9 +28,7 @@ export type AttachmentManagerConfig = {
   maxNumberOfFilesPerMessage: number;
   // todo: refactor this. We want a pipeline where it would be possible to customize the preparation, upload, and post-upload steps.
   /** Function that allows to customize the upload request. */
-  doUploadRequest?: (
-    fileLike: FileReference | FileLike,
-  ) => ReturnType<StreamChat['sendFile']>;
+  doUploadRequest?: UploadRequestFn;
 };
 export type LinkPreviewConfig = {
   /** Custom function to react to link preview dismissal */

src/messageComposer/messageComposer.ts

@@ -1,4 +1,5 @@
 import { AttachmentManager } from './attachmentManager';
+import { CustomDataManager } from './CustomDataManager';
 import { LinkPreviewsManager } from './linkPreviewsManager';
 import { PollComposer } from './pollComposer';
 import { TextComposer } from './textComposer';
@@ -124,6 +125,7 @@ export class MessageComposer {
   linkPreviewsManager: LinkPreviewsManager;
   textComposer: TextComposer;
   pollComposer: PollComposer;
+  customDataManager: CustomDataManager;
   // todo: mediaRecorder: MediaRecorderController;
 
   private unsubscribeFunctions: Set<() => void> = new Set();
@@ -178,6 +180,7 @@ export class MessageComposer {
     });
     this.textComposer = new TextComposer({ composer: this, message });
     this.pollComposer = new PollComposer({ composer: this });
+    this.customDataManager = new CustomDataManager({ composer: this, message });
 
     this.editingAuditState = new StateStore<EditingAuditState>(
       this.initEditingAuditState(composition),
@@ -274,7 +277,7 @@ export class MessageComposer {
   }
 
   get hasSendableData() {
-    return (
+    return !!(
       (!this.attachmentManager.uploadsInProgressCount &&
         (!this.textComposer.textIsEmpty ||
           this.attachmentManager.successfulUploadsCount > 0)) ||
@@ -323,6 +326,7 @@ export class MessageComposer {
     this.attachmentManager.initState({ message });
     this.linkPreviewsManager.initState({ message });
     this.textComposer.initState({ message });
+    this.customDataManager.initState({ message });
     this.state.next(initState(composition));
     if (
       composition &&
@@ -369,6 +373,7 @@ export class MessageComposer {
     this.unsubscribeFunctions.add(this.subscribeAttachmentManagerStateChanged());
     this.unsubscribeFunctions.add(this.subscribeLinkPreviewsManagerStateChanged());
     this.unsubscribeFunctions.add(this.subscribePollComposerStateChanged());
+    this.unsubscribeFunctions.add(this.subscribeCustomDataManagerStateChanged());
     this.unsubscribeFunctions.add(this.subscribeMessageComposerStateChanged());
 
     if (this.config.drafts.enabled) {
@@ -549,6 +554,13 @@ export class MessageComposer {
       }
     });
 
+  private subscribeCustomDataManagerStateChanged = () =>
+    this.customDataManager.state.subscribe((nextValue, previousValue) => {
+      if (!this.customDataManager.isDataEqual(nextValue, previousValue)) {
+        this.logStateUpdateTimestamp();
+      }
+    });
+
   private subscribeMessageComposerStateChanged = () =>
     this.state.subscribe((nextValue, previousValue) => {
       const isActualStateChange =
@@ -574,6 +586,7 @@ export class MessageComposer {
     this.linkPreviewsManager.initState();
     this.textComposer.initState();
     this.pollComposer.initState();
+    this.customDataManager.initState();
     this.initState();
   };
 

src/messageComposer/middleware/messageComposer/MessageComposerMiddlewareExecutor.ts

@@ -26,7 +26,10 @@ import type {
   MessageDraftComposerMiddlewareExecutorOptions,
   MessageDraftComposerMiddlewareValueState,
 } from './types';
-import {} from './types';
+import {
+  createCustomDataCompositionMiddleware,
+  createDraftCustomDataCompositionMiddleware,
+} from './customData';
 
 export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<MessageComposerMiddlewareValueState> {
   constructor({ composer }: MessageComposerMiddlewareExecutorOptions) {
@@ -38,6 +41,7 @@ export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<Messag
       createAttachmentsCompositionMiddleware(composer),
       createLinkPreviewsCompositionMiddleware(composer),
       createMessageComposerStateCompositionMiddleware(composer),
+      createCustomDataCompositionMiddleware(composer),
       createCompositionValidationMiddleware(composer),
       createCompositionDataCleanupMiddleware(composer),
     ]);
@@ -54,6 +58,7 @@ export class MessageDraftComposerMiddlewareExecutor extends MiddlewareExecutor<M
       createDraftAttachmentsCompositionMiddleware(composer),
       createDraftLinkPreviewsCompositionMiddleware(composer),
       createDraftMessageComposerStateCompositionMiddleware(composer),
+      createDraftCustomDataCompositionMiddleware(composer),
       createDraftCompositionValidationMiddleware(composer),
     ]);
   }

src/messageComposer/middleware/messageComposer/customData.ts

@@ -0,0 +1,56 @@
+import type { MiddlewareHandlerParams } from '../../../middleware';
+import type { MessageComposer } from '../../messageComposer';
+import type {
+  MessageComposerMiddlewareValueState,
+  MessageDraftComposerMiddlewareValueState,
+} from './types';
+
+export const createCustomDataCompositionMiddleware = (composer: MessageComposer) => ({
+  id: 'stream-io/message-composer-middleware/custom-data',
+  compose: ({
+    input,
+    nextHandler,
+  }: MiddlewareHandlerParams<MessageComposerMiddlewareValueState>) => {
+    const data = composer.customDataManager.data;
+    if (!data) return nextHandler(input);
+
+    return nextHandler({
+      ...input,
+      state: {
+        ...input.state,
+        localMessage: {
+          ...input.state.localMessage,
+          ...data,
+        },
+        message: {
+          ...input.state.message,
+          ...data,
+        },
+      },
+    });
+  },
+});
+
+export const createDraftCustomDataCompositionMiddleware = (
+  composer: MessageComposer,
+) => ({
+  id: 'stream-io/message-composer-middleware/draft-custom-data',
+  compose: ({
+    input,
+    nextHandler,
+  }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+    const data = composer.customDataManager.data;
+    if (!data) return nextHandler(input);
+
+    return nextHandler({
+      ...input,
+      state: {
+        ...input.state,
+        draft: {
+          ...input.state.draft,
+          ...data,
+        },
+      },
+    });
+  },
+});

src/messageComposer/middleware/messageComposer/index.ts

@@ -1,5 +1,6 @@
 export * from './attachments';
 export * from './cleanData';
+export * from './customData';
 export * from './compositionValidation';
 export * from './linkPreviews';
 export * from './MessageComposerMiddlewareExecutor';

test/unit/MessageComposer/CustomDataManager.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CustomDataManager } from '../../../src/messageComposer/CustomDataManager';
+import { MessageComposer } from '../../../src/messageComposer/messageComposer';
+import { Channel } from '../../../src/channel';
+import { StreamChat } from '../../../src/client';
+import { LocalMessage } from '../../../src/types';
+
+describe('CustomDataManager', () => {
+  let customDataManager: CustomDataManager;
+  let mockComposer: MessageComposer;
+  let mockChannel: Channel;
+  let mockClient: StreamChat;
+
+  beforeEach(() => {
+    // Reset mocks
+    vi.clearAllMocks();
+
+    // Setup mocks
+    mockClient = new StreamChat('apiKey', 'apiSecret');
+    mockClient.user = { id: 'user-id', name: 'Test User' };
+
+    mockChannel = mockClient.channel('channelType', 'channelId');
+    mockComposer = new MessageComposer({
+      client: mockClient,
+      compositionContext: mockChannel,
+    });
+
+    // Create instance
+    customDataManager = new CustomDataManager({
+      composer: mockComposer,
+    });
+  });
+
+  describe('constructor', () => {
+    it('should initialize with empty data', () => {
+      expect(customDataManager.data).toEqual({});
+    });
+
+    it('should initialize with message data if provided', () => {
+      const message: LocalMessage = {
+        custom_field: 'test-value',
+        id: 'test-message-id',
+        text: 'Test message',
+        type: 'regular',
+        attachments: [],
+        mentioned_users: [],
+        created_at: new Date(),
+        deleted_at: null,
+        pinned_at: null,
+        status: 'sent',
+        updated_at: new Date(),
+      };
+
+      const managerWithMessage = new CustomDataManager({
+        composer: mockComposer,
+        message,
+      });
+
+      expect(managerWithMessage.data).toEqual({});
+    });
+  });
+
+  describe('initState', () => {
+    it('should reset state to empty data', () => {
+      // Set some data first
+      customDataManager.setData({ test: 'value' });
+      expect(customDataManager.data).toEqual({ test: 'value' });
+
+      // Reset state
+      customDataManager.initState();
+      expect(customDataManager.data).toEqual({});
+    });
+
+    it('should reset state with message data if provided', () => {
+      const message: LocalMessage = {
+        custom_field: 'test-value',
+        id: 'test-message-id',
+        text: 'Test message',
+        type: 'regular',
+        attachments: [],
+        mentioned_users: [],
+        created_at: new Date(),
+        deleted_at: null,
+        pinned_at: null,
+        status: 'sent',
+        updated_at: new Date(),
+      };
+
+      customDataManager.initState({ message });
+      expect(customDataManager.data).toEqual({});
+    });
+  });
+
+  describe('setCustomData', () => {
+    it('should update data with new values', () => {
+      customDataManager.setData({ field1: 'value1' });
+      expect(customDataManager.data).toEqual({ field1: 'value1' });
+
+      customDataManager.setData({ field2: 'value2' });
+      expect(customDataManager.data).toEqual({ field1: 'value1', field2: 'value2' });
+    });
+
+    it('should override existing values', () => {
+      customDataManager.setData({ field1: 'value1' });
+      customDataManager.setData({ field1: 'new-value' });
+      expect(customDataManager.data).toEqual({ field1: 'new-value' });
+    });
+  });
+
+  describe('isDataEqual', () => {
+    it('should return true for equal data', () => {
+      const state1 = { data: { field1: 'value1' } };
+      const state2 = { data: { field1: 'value1' } };
+      expect(customDataManager.isDataEqual(state1, state2)).toBe(true);
+    });
+
+    it('should return false for different data', () => {
+      const state1 = { data: { field1: 'value1' } };
+      const state2 = { data: { field1: 'value2' } };
+      expect(customDataManager.isDataEqual(state1, state2)).toBe(false);
+    });
+
+    it('should handle undefined previous state', () => {
+      const state1 = { data: { field1: 'value1' } };
+      expect(customDataManager.isDataEqual(state1, undefined)).toBe(false);
+    });
+  });
+});