feat: add MessageComposer

Author: MartinCupela

package.json

@@ -56,7 +56,8 @@
     "form-data": "^4.0.0",
     "isomorphic-ws": "^5.0.0",
     "jsonwebtoken": "^9.0.2",
-    "ws": "^8.18.1"
+    "ws": "^8.18.1",
+    "linkifyjs": "^4.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.7.1",

src/channel.ts

@@ -73,6 +73,12 @@ import type {
 } from './types';
 import type { Role } from './permissions';
 import type { CustomChannelData } from './custom_types';
+import type { TextComposerMiddleware } from './messageComposer';
+import {
+  createCommandsMiddleware,
+  createMentionsMiddleware,
+  MessageComposer,
+} from './messageComposer';
 
 /**
  * Channel - The Channel class manages it's own state.
@@ -107,6 +113,7 @@ export class Channel {
   isTyping: boolean;
   disconnected: boolean;
   push_preferences?: PushPreference;
+  private _messageComposer: MessageComposer;
 
   /**
    * constructor - Create a channel
@@ -150,6 +157,12 @@ export class Channel {
     this.lastTypingEvent = null;
     this.isTyping = false;
     this.disconnected = false;
+
+    this._messageComposer = new MessageComposer({ channel: this });
+    this._messageComposer.textComposer.use([
+      createCommandsMiddleware(this),
+      createMentionsMiddleware(client),
+    ] as TextComposerMiddleware[]);
   }
 
   /**
@@ -174,6 +187,17 @@ export class Channel {
     return client.configs[this.cid];
   }
 
+  get messageComposer() {
+    return this._messageComposer;
+  }
+
+  set messageComposer(messageComposer: MessageComposer) {
+    if (this.messageComposer) {
+      this.messageComposer.unregisterSubscriptions();
+    }
+    this._messageComposer = messageComposer;
+  }
+
   /**
    * sendMessage - Send a message to this channel
    *
@@ -198,7 +222,7 @@ export class Channel {
   }
 
   /**
-   * draftMessage - create a message draft for the channel or a message thread
+   * draftMessage - create a message draftMessage for the channel or a message thread
    *
    * @param {DraftMessagePayload} message The DraftMessage object
    * @return {Promise<CreateDraftResponse>} The Server Response
@@ -1350,6 +1374,8 @@ export class Channel {
 
     this.getClient().polls.hydratePollCache(state.messages, true);
 
+    this.messageComposer.initState({ composition: state.draft });
+
     const areCapabilitiesChanged =
       [...(state.channel.own_capabilities || [])].sort().join() !==
       [
@@ -1623,12 +1649,22 @@ export class Channel {
         }
         break;
       case 'draft.updated':
-        if (event.draft && !(event.draft as DraftResponse).parent_id) {
+        if (
+          this.getClient().options.drafts &&
+          event.draft &&
+          !(event.draft as DraftResponse).parent_id
+        ) {
           channelState.messageDraft = event.draft as DraftResponse;
         }
         break;
       case 'draft.deleted':
-        channelState.messageDraft = undefined;
+        if (
+          this.getClient().options.drafts &&
+          event.draft &&
+          !(event.draft as DraftResponse).parent_id
+        ) {
+          channelState.messageDraft = null;
+        }
         break;
       case 'message.deleted':
         if (event.message) {

src/channel_state.ts

@@ -42,7 +42,7 @@ export class ChannelState {
   unreadCount: number;
   membership: ChannelMemberResponse;
   last_message_at: Date | null;
-  messageDraft?: DraftResponse;
+  messageDraft: DraftResponse | null;
   /**
    * Flag which indicates if channel state contain latest/recent messages or no.
    * This flag should be managed by UI sdks using a setter - setIsUpToDate.
@@ -84,6 +84,7 @@ export class ChannelState {
       channel?.state?.last_message_at != null
         ? new Date(channel.state.last_message_at)
         : null;
+    this.messageDraft = channel?.state?.messageDraft ?? null;
   }
 
   get messages() {

src/client.ts

@@ -233,6 +233,7 @@ export class StreamChat {
   private static _instance?: unknown | StreamChat; // type is undefined|StreamChat, unknown is due to TS limitations with statics
 
   _user?: OwnUserResponse | UserResponse;
+  appSettingsPromise?: Promise<AppSettingsAPIResponse>;
   activeChannels: {
     [key: string]: Channel;
   };
@@ -791,7 +792,8 @@ export class StreamChat {
    * getAppSettings - retrieves application settings
    */
   async getAppSettings() {
-    return await this.get<AppSettingsAPIResponse>(this.baseURL + '/app');
+    this.appSettingsPromise = this.get<AppSettingsAPIResponse>(this.baseURL + '/app');
+    return await this.appSettingsPromise;
   }
 
   /**
@@ -1824,6 +1826,7 @@ export class StreamChat {
         };
         this.polls.hydratePollCache(channelState.messages, true);
       }
+      c.messageComposer.initState({ composition: channelState.draft });
 
       channels.push(c);
     }

src/constants.ts

@@ -1,4 +1,5 @@
 export const DEFAULT_QUERY_CHANNELS_MESSAGE_LIST_PAGE_SIZE = 25;
 export const DEFAULT_QUERY_CHANNEL_MESSAGE_LIST_PAGE_SIZE = 100;
-
 export const DEFAULT_MESSAGE_SET_PAGINATION = { hasNext: false, hasPrev: false };
+export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
+export const API_MAX_FILES_ALLOWED_PER_MESSAGE = 10;

src/index.ts

@@ -7,6 +7,7 @@ export * from './channel_state';
 export * from './connection';
 export * from './events';
 export * from './insights';
+export * from './messageComposer';
 export * from './moderation';
 export * from './permissions';
 export * from './poll';