Merge remote-tracking branch 'origin/feat/message-composer' into feat/message-composer

Author: MartinCupela

src/channel.ts

@@ -159,10 +159,6 @@ export class Channel {
     this.disconnected = false;
 
     this._messageComposer = new MessageComposer({ channel: this });
-    this._messageComposer.textComposer.use([
-      createCommandsMiddleware(this),
-      createMentionsMiddleware(this),
-    ] as TextComposerMiddleware[]);
   }
 
   /**

src/client.ts

@@ -229,11 +229,64 @@ import type {
 } from './channel_manager';
 import { ChannelManager } from './channel_manager';
 import { NotificationManager } from './notifications';
+import { StateStore } from './store';
+import {
+  createCommandsMiddleware,
+  createMentionsMiddleware,
+  MessageComposer,
+  MessageComposerOptions,
+  TextComposerMiddleware,
+} from './messageComposer';
 
 function isString(x: unknown): x is string {
   return typeof x === 'string' || x instanceof String;
 }
 
+type MessageComposerDefine = ({
+  constructorParameters,
+}: {
+  constructorParameters: MessageComposerOptions;
+}) => MessageComposer;
+
+type MessageComposerApplyModifications = ({
+  composer,
+}: {
+  composer: MessageComposer;
+}) => void | (() => void);
+
+// TODO: maybe template modifications
+// { template1: { applyModifications... }, template2: {applyModifications} }
+// new MessageComposer({ channel, modificationTemplate: 'template1' })
+type MessageComposerSetupState = {
+  define: MessageComposerDefine;
+  /**
+   * Each `MessageComposer` runs this function each time its signature changes or
+   * whenever you run `MessageComposer.registerSubscriptions`. Function returned
+   * from `applyModifications` will be used as a cleanup function - it will be stored
+   * and ran before new modification is applied. Cleaning up only the
+   * modified parts is the general way to go but if your setup gets a bit
+   * complicated, feel free to restore the whole composer with `MessageComposer.restore`.
+   */
+  applyModifications: MessageComposerApplyModifications | null;
+};
+
+const INITIAL_MESSAGE_COMPOSER_SETUP_STATE: MessageComposerSetupState = {
+  define: ({ constructorParameters }) => new MessageComposer(constructorParameters),
+  applyModifications: ({ composer }) => {
+    console.log(composer);
+
+    composer.textComposer.upsertMiddleware([
+      createMentionsMiddleware(composer.channel),
+      createCommandsMiddleware(composer.channel),
+      // TODO: fix typing
+    ] as TextComposerMiddleware[]);
+
+    return () => {
+      // composer.restore()
+    };
+  },
+};
+
 export class StreamChat {
   private static _instance?: unknown | StreamChat; // type is undefined|StreamChat, unknown is due to TS limitations with statics
 
@@ -289,6 +342,8 @@ export class StreamChat {
   sdkIdentifier?: SdkIdentifier;
   deviceIdentifier?: DeviceIdentifier;
   private nextRequestAbortController: AbortController | null = null;
+  public _messageComposerSetupState: StateStore<MessageComposerSetupState> =
+    new StateStore(INITIAL_MESSAGE_COMPOSER_SETUP_STATE);
 
   /**
    * Initialize a client
@@ -4320,4 +4375,15 @@ export class StreamChat {
   ) {
     return await this.post<QueryDraftsResponse>(this.baseURL + '/drafts/query', options);
   }
+
+  // TODO: this might not be needed
+  public createMessageComposer: MessageComposerDefine = (setup) => {
+    return this._messageComposerSetupState.getLatestValue().define(setup);
+  };
+
+  public setMessageComposerApplyModifications = (
+    applyModifications: MessageComposerSetupState['applyModifications'],
+  ) => {
+    this._messageComposerSetupState.partialNext({ applyModifications });
+  };
 }

src/messageComposer/messageComposer.ts

@@ -42,6 +42,7 @@ export type MessageComposerOptions = {
   composition?: DraftResponse | MessageResponse | LocalMessage;
   config?: Partial<MessageComposerConfig>;
   threadId?: string;
+  tag?: string;
 };
 
 const isMessageDraft = (composition: unknown): composition is DraftResponse =>
@@ -82,11 +83,14 @@ const DEFAULT_COMPOSER_CONFIG: MessageComposerConfig = {
   urlPreviewEnabled: false,
 };
 
+const noop = () => undefined;
+
 export class MessageComposer {
   readonly channel: Channel;
   readonly state: StateStore<MessageComposerState>;
   readonly editedMessage?: LocalMessage;
   readonly threadId: string | null;
+  readonly tag: string;
   config: MessageComposerConfig;
   attachmentManager: AttachmentManager;
   linkPreviewsManager: LinkPreviewsManager;
@@ -96,10 +100,11 @@ export class MessageComposer {
   private unsubscribeFunctions: Set<() => void> = new Set();
   private compositionMiddlewareExecutor: MessageComposerMiddlewareExecutor;
 
-  constructor({ channel, composition, config, threadId }: MessageComposerOptions) {
+  constructor({ channel, composition, config, threadId, tag }: MessageComposerOptions) {
     this.channel = channel;
     this.threadId = threadId ?? null;
     this.config = mergeWith(DEFAULT_COMPOSER_CONFIG, config ?? {});
+    this.tag = tag ?? generateUUIDv4();
 
     let message: LocalMessage | DraftMessage | undefined = undefined;
     if (isMessageDraft(composition)) {
@@ -167,8 +172,9 @@ export class MessageComposer {
   public registerSubscriptions = () => {
     if (this.unsubscribeFunctions.size) {
       // Already listening for events and changes
-      return;
+      return noop;
     }
+    this.unsubscribeFunctions.add(this.subscribeMessageComposerSetupStateChange());
     this.unsubscribeFunctions.add(this.subscribeMessageUpdated());
     this.unsubscribeFunctions.add(this.subscribeMessageDeleted());
     this.unsubscribeFunctions.add(this.subscribeTextChanged());
@@ -177,8 +183,11 @@ export class MessageComposer {
       this.unsubscribeFunctions.add(this.subscribeDraftUpdated());
       this.unsubscribeFunctions.add(this.subscribeDraftDeleted());
     }
+
+    return this.unregisterSubscriptions;
   };
 
+  // TODO: maybe make these private across the SDK
   public unregisterSubscriptions = () => {
     this.unsubscribeFunctions.forEach((cleanupFunction) => cleanupFunction());
     this.unsubscribeFunctions.clear();
@@ -217,6 +226,24 @@ export class MessageComposer {
     return () => unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
   };
 
+  private subscribeMessageComposerSetupStateChange = () => {
+    let cleanupBefore: (() => void) | null = null;
+    const unsubscribe = this.client._messageComposerSetupState.subscribeWithSelector(
+      ({ applyModifications }) => ({
+        applyModifications,
+      }),
+      ({ applyModifications }) => {
+        cleanupBefore?.();
+        cleanupBefore = applyModifications?.({ composer: this }) ?? null;
+      },
+    );
+
+    return () => {
+      cleanupBefore?.();
+      unsubscribe();
+    };
+  };
+
   private subscribeMessageDeleted = () =>
     this.client.on('message.deleted', (event) => {
       if (!event.message) return;

src/thread.ts

@@ -183,11 +183,6 @@ export class Thread {
       composition: threadData.draft,
       threadId: this.id,
     });
-
-    this._messageComposer.textComposer.use([
-      createCommandsMiddleware(channel),
-      createMentionsMiddleware(channel),
-    ] as TextComposerMiddleware[]);
   }
 
   get messageComposer() {

src/types.ts

@@ -42,12 +42,12 @@ export type KnownKeys<T> = {
   : never;
 
 export type RequireAtLeastOne<T> = {
-  [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
+  [K in keyof T]-?: Required<Pick<T, K>> & Partial<Omit<T, K>>;
 }[keyof T];
 
 export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Omit<T, Keys> &
   {
-    [K in Keys]-?: Required<Pick<T, K>> & Partial<Omit<T, K>>;
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Record<Exclude<Keys, K>, undefined>>;
   }[Keys];
 
 /* Unknown Record */