feat: add missing configuration parameters for AttachmentManager and TextComposer (#1520)

Author: MartinCupela

src/messageComposer/attachmentManager.ts

@@ -89,6 +89,14 @@ export class AttachmentManager {
     return this.composer.config.attachments;
   }
 
+  get acceptedFiles() {
+    return this.config.acceptedFiles;
+  }
+
+  set acceptedFiles(acceptedFiles: AttachmentManagerConfig['acceptedFiles']) {
+    this.composer.updateConfig({ attachments: { acceptedFiles } });
+  }
+
   get fileUploadFilter() {
     return this.config.fileUploadFilter;
   }

src/messageComposer/configuration/configuration.ts

@@ -26,11 +26,13 @@ export const DEFAULT_LINK_PREVIEW_MANAGER_CONFIG: LinkPreviewsManagerConfig = {
 };
 
 export const DEFAULT_ATTACHMENT_MANAGER_CONFIG: AttachmentManagerConfig = {
+  acceptedFiles: [], // an empty array means all files are accepted
   fileUploadFilter: () => true,
   maxNumberOfFilesPerMessage: API_MAX_FILES_ALLOWED_PER_MESSAGE,
 };
 
 export const DEFAULT_TEXT_COMPOSER_CONFIG: TextComposerConfig = {
+  enabled: true,
   publishTypingEvents: true,
 };
 

src/messageComposer/configuration/types.ts

@@ -12,7 +12,9 @@ export type DraftsConfiguration = {
   enabled: boolean;
 };
 export type TextComposerConfig = {
-  /** If true, triggers typing events on text input keystroke */
+  /** If false, the text input, change and selection events are disabled */
+  enabled: boolean;
+  /** If true, triggers typing events on text input keystroke. Disabled for threads and message editing by default. */
   publishTypingEvents: boolean;
   /** Default value for the message input */
   defaultValue?: string;
@@ -30,6 +32,11 @@ export type AttachmentManagerConfig = {
   fileUploadFilter: FileUploadFilter;
   /** Maximum number of attachments allowed per message */
   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.
+   */
+  acceptedFiles: string[];
   // 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?: UploadRequestFn;

src/messageComposer/messageComposer.ts

@@ -236,7 +236,7 @@ export class MessageComposer {
       return this.compositionContext.legacyThreadId;
     }
 
-    // check if message is a reply, get parentMessageId
+    // check if the message is a reply, get parentMessageId
     if (typeof this.compositionContext.parent_id === 'string') {
       return this.compositionContext.parent_id;
     }
@@ -333,10 +333,6 @@ export class MessageComposer {
   initEditingAuditState = (
     composition?: DraftResponse | MessageResponse | LocalMessage,
   ) => initEditingAuditState(composition);
-  //   this.config?.drafts.enabled || !compositionIsDraftResponse(composition)
-  //     ? composition
-  //     : undefined,
-  // );
 
   private logStateUpdateTimestamp() {
     this.editingAuditState.partialNext({

src/messageComposer/textComposer.ts

@@ -68,6 +68,14 @@ export class TextComposer {
     return this.composer.config.text;
   }
 
+  get enabled() {
+    return this.composer.config.text.enabled;
+  }
+
+  set enabled(enabled: boolean) {
+    this.composer.updateConfig({ text: { enabled } });
+  }
+
   set defaultValue(defaultValue: string) {
     this.composer.updateConfig({ text: { defaultValue } });
   }
@@ -138,10 +146,13 @@ export class TextComposer {
   };
 
   setText = (text: string) => {
+    if (!this.enabled) return;
     this.state.partialNext({ text });
   };
 
   insertText = ({ text, selection }: { text: string; selection?: TextSelection }) => {
+    if (!this.enabled) return;
+
     const finalSelection: TextSelection = selection ?? {
       start: this.text.length,
       end: this.text.length,
@@ -189,6 +200,7 @@ export class TextComposer {
     selection: TextSelection;
     text: string;
   }) => {
+    if (!this.enabled) return;
     const output = await this.middlewareExecutor.execute('onChange', {
       state: {
         ...this.state.getLatestValue(),
@@ -209,6 +221,7 @@ export class TextComposer {
 
   // todo: document how to register own middleware handler to simulate onSelectUser prop
   handleSelect = async (target: TextComposerSuggestion<unknown>) => {
+    if (!this.enabled) return;
     const output = await this.middlewareExecutor.execute(
       'onSuggestionItemSelect',
       {

test/unit/MessageComposer/attachmentManager.test.ts

@@ -176,7 +176,7 @@ describe('AttachmentManager', () => {
 
   describe('getters', () => {
     it('should retrieve attachments config from composer', () => {
-      const config: AttachmentManagerConfig = {
+      const config: Partial<AttachmentManagerConfig> = {
         doUploadRequest: () => {
           return Promise.resolve({ file: 'x' });
         },
@@ -186,7 +186,7 @@ describe('AttachmentManager', () => {
       const {
         messageComposer: { attachmentManager },
       } = setup({ config });
-      expect(attachmentManager.config).toEqual(config);
+      expect(attachmentManager.config).toEqual({ ...config, acceptedFiles: [] });
     });
 
     it('should return the correct values from state', async () => {

test/unit/MessageComposer/textComposer.test.ts

@@ -199,6 +199,15 @@ describe('TextComposer', () => {
       textComposer.state.partialNext({ text: '' });
       expect(textComposer.textIsEmpty).toBe(true);
     });
+
+    it('gets the current value of enabled', () => {
+      const {
+        messageComposer: { textComposer },
+      } = setup();
+      expect(textComposer.enabled).toBe(true);
+      textComposer.enabled = false;
+      expect(textComposer.enabled).toBe(false);
+    });
   });
 
   describe('initState', () => {
@@ -372,6 +381,18 @@ describe('TextComposer', () => {
       textComposer.setText('New text');
       expect(textComposer.text).toBe('New text');
     });
+    it('should not update the text when disabled', () => {
+      const message: LocalMessage = {
+        id: 'test-message',
+        type: 'regular',
+        text: 'Hello world',
+      };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message, config: { enabled: false } });
+      textComposer.setText('New text');
+      expect(textComposer.text).toBe(message.text);
+    });
   });
 
   describe('insertText', () => {
@@ -460,6 +481,14 @@ describe('TextComposer', () => {
       textComposer.insertText({ text: insertedText, selection: { start: 7, end: 9 } });
       expect(textComposer.text).toBe('Hello wHi ');
     });
+
+    it('should not insert text if disabled', () => {
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message, config: { enabled: false } });
+      textComposer.insertText({ text: ' beautiful', selection: { start: 5, end: 5 } });
+      expect(textComposer.text).toBe(message.text);
+    });
   });
 
   describe('closeSuggestions', () => {
@@ -512,6 +541,22 @@ describe('TextComposer', () => {
       );
     });
 
+    it('should not update state with middleware result if disabled', async () => {
+      const {
+        messageComposer: { textComposer },
+      } = setup({ config: { enabled: false } });
+      textComposer.state.next(initialState);
+      const initialText = textComposer.text;
+      const initialSelection = textComposer.selection;
+      await textComposer.handleChange({
+        text: 'Test message',
+        selection: { start: 12, end: 12 },
+      });
+
+      expect(textComposer.text).toBe(initialText);
+      expect(textComposer.selection).toEqual(initialSelection);
+    });
+
     it('should not update state if middleware returns discard status', async () => {
       const {
         messageComposer: { textComposer },
@@ -631,6 +676,20 @@ describe('TextComposer', () => {
       );
     });
 
+    it('should not update state with middleware result if disabled', async () => {
+      const {
+        messageComposer: { textComposer },
+      } = setup({ config: { enabled: false } });
+      textComposer.state.next(initialState);
+
+      const target = { id: 'user-1' };
+      const executeSpy = vi.spyOn(textComposer.middlewareExecutor, 'execute');
+      executeSpy.mockResolvedValueOnce(textComposerMiddlewareExecuteOutput);
+      await textComposer.handleSelect(target);
+
+      expect(textComposer.state.getLatestValue()).toEqual(initialState);
+    });
+
     it('should not update state if middleware returns discard status', async () => {
       const {
         messageComposer: { textComposer },