feat: message composer (#1495)

This PR introduces a new message composer system that provides a robust
foundation for message composition with support for drafts, middleware,
and various composition features.

- Message draft support for channels
- Text composition middleware system
- Command handling with case-insensitive search
- Link preview integration
- Mentions search with local member support
- Notification management system
- Local message type for better state management

- Introduces `MessageComposer` class for managing message composition
- Adds middleware system for text composition with extensible pipeline
- Implements draft message handling with proper state management
- Adds support for commands with trigger-based activation
- Integrates link preview functionality during composition
- Provides notification management for composition events
- Introduces `LocalMessage` type for improved state handling

Introduction of `LocalMessage` type. The `MessageResponse` is
automatically transformed into LocalMessage type before being submitted
to the state.

- Added comprehensive test coverage for:
  - Message composition middleware
  - Command handling
  - Link preview integration
  - Mentions search
  - State management
  - Draft handling

- Bundle size increase: +72.3 kB (+24.62%)
  - dist/cjs/index.browser.cjs: +19.4 kB
  - dist/cjs/index.node.cjs: +20 kB
  - dist/esm/index.js: +32.9 kB

- Convert message composer into a plugin system
- Further optimize bundle size
- Add more middleware options for extensibility
- Encapsulate interaction with the UI element representing the text
editing area

- Related to stream-chat-react#2669

- `linkifyjs@^4.2.0`

BREAKING CHANGE: Replacement of FormatMessageResponse with LocalMessage
type

---------

Co-authored-by: Anton Arnautov <[email protected]>
Co-authored-by: Khushal Agarwal <[email protected]>
Co-authored-by: Zita Szupera <[email protected]>
Co-authored-by: Ivan Sekovanikj <[email protected]>

Author: 5 people

package.json

@@ -56,6 +56,7 @@
     "form-data": "^4.0.0",
     "isomorphic-ws": "^5.0.0",
     "jsonwebtoken": "^9.0.2",
+    "linkifyjs": "^4.2.0",
     "ws": "^8.18.1"
   },
   "devDependencies": {

src/channel.ts

@@ -27,11 +27,11 @@ import type {
   EventAPIResponse,
   EventHandler,
   EventTypes,
-  FormatMessageResponse,
   GetDraftResponse,
   GetMultipleMessagesAPIResponse,
   GetReactionsAPIResponse,
   GetRepliesAPIResponse,
+  LocalMessage,
   MarkReadOptions,
   MarkUnreadOptions,
   MemberFilters,
@@ -70,6 +70,7 @@ import type {
 } from './types';
 import type { Role } from './permissions';
 import type { CustomChannelData } from './custom_types';
+import { MessageComposer } from './messageComposer';
 
 /**
  * Channel - The Channel class manages it's own state.
@@ -104,6 +105,7 @@ export class Channel {
   isTyping: boolean;
   disconnected: boolean;
   push_preferences?: PushPreference;
+  public readonly messageComposer: MessageComposer;
 
   /**
    * constructor - Create a channel
@@ -147,6 +149,11 @@ export class Channel {
     this.lastTypingEvent = null;
     this.isTyping = false;
     this.disconnected = false;
+
+    this.messageComposer = new MessageComposer({
+      client: this._client,
+      compositionContext: this,
+    });
   }
 
   /**
@@ -421,7 +428,9 @@ export class Channel {
 
     const url =
       this.getClient().baseURL +
-      `/messages/${encodeURIComponent(messageID)}/reaction/${encodeURIComponent(reactionType)}`;
+      `/messages/${encodeURIComponent(messageID)}/reaction/${encodeURIComponent(
+        reactionType,
+      )}`;
     //provided when server side request
     if (user_id) {
       return this.getClient().delete<ReactionAPIResponse>(url, { user_id });
@@ -950,7 +959,7 @@ export class Channel {
    *
    * @return {ReturnType<ChannelState['formatMessage']> | undefined} Description
    */
-  lastMessage(): FormatMessageResponse | undefined {
+  lastMessage(): LocalMessage | undefined {
     // get last 5 messages, sort, return the latest
     // get a slice of the last 5
     let min = this.state.latestMessages.length - 5;
@@ -1176,7 +1185,7 @@ export class Channel {
     }
   }
 
-  _countMessageAsUnread(message: FormatMessageResponse | MessageResponse) {
+  _countMessageAsUnread(message: LocalMessage | MessageResponse) {
     if (message.shadowed) return false;
     if (message.silent) return false;
     if (message.parent_id && !message.show_in_channel) return false;
@@ -1285,7 +1294,9 @@ export class Channel {
       );
     }
 
-    let queryURL = `${this.getClient().baseURL}/channels/${encodeURIComponent(this.type)}`;
+    let queryURL = `${this.getClient().baseURL}/channels/${encodeURIComponent(
+      this.type,
+    )}`;
     if (this.id) {
       queryURL += `/${encodeURIComponent(this.id)}`;
     }
@@ -1342,6 +1353,10 @@ export class Channel {
 
     this.getClient().polls.hydratePollCache(state.messages, true);
 
+    if (state.draft) {
+      this.messageComposer.initState({ composition: state.draft });
+    }
+
     const areCapabilitiesChanged =
       [...(state.channel.own_capabilities || [])].sort().join() !==
       [
@@ -1898,7 +1913,9 @@ export class Channel {
     if (!this.id) {
       throw new Error('channel id is not defined');
     }
-    return `${this.getClient().baseURL}/channels/${encodeURIComponent(this.type)}/${encodeURIComponent(this.id)}`;
+    return `${this.getClient().baseURL}/channels/${encodeURIComponent(
+      this.type,
+    )}/${encodeURIComponent(this.id)}`;
   };
 
   _checkInitialized() {

src/channel_state.ts

@@ -2,8 +2,9 @@ import type { Channel } from './channel';
 import type {
   ChannelMemberResponse,
   Event,
-  FormatMessageResponse,
+  LocalMessage,
   MessageResponse,
+  MessageResponseBase,
   MessageSet,
   MessageSetType,
   PendingMessageResponse,
@@ -122,7 +123,7 @@ export class ChannelState {
    * @param {MessageSetType} messageSetToAddToIfDoesNotExist Which message set to add to if message is not in the list (only used if addIfDoesNotExist is true)
    */
   addMessageSorted(
-    newMessage: MessageResponse,
+    newMessage: MessageResponse | LocalMessage,
     timestampChanged = false,
     addIfDoesNotExist = true,
     messageSetToAddToIfDoesNotExist: MessageSetType = 'latest',
@@ -142,7 +143,8 @@ export class ChannelState {
    *
    * @param {MessageResponse} message `MessageResponse` object
    */
-  formatMessage = (message: MessageResponse) => formatMessage(message);
+  formatMessage = (message: MessageResponse | MessageResponseBase | LocalMessage) =>
+    formatMessage(message);
 
   /**
    * addMessagesSorted - Add the list of messages to state and resorts the messages
@@ -155,7 +157,7 @@ export class ChannelState {
    *
    */
   addMessagesSorted(
-    newMessages: MessageResponse[],
+    newMessages: (MessageResponse | LocalMessage)[],
     timestampChanged = false,
     initializing = false,
     addIfDoesNotExist = true,
@@ -180,7 +182,7 @@ export class ChannelState {
       if (isMessageFormatted) {
         message = messagesToAdd[i] as ReturnType<ChannelState['formatMessage']>;
       } else {
-        message = this.formatMessage(messagesToAdd[i] as MessageResponse);
+        message = this.formatMessage(messagesToAdd[i]);
 
         if (message.user && this._channel?.cid) {
           /**
@@ -365,7 +367,7 @@ export class ChannelState {
         updated_at: m.updated_at?.toISOString(),
       }) as unknown as MessageResponse;
 
-    const update = (messages: FormatMessageResponse[]) => {
+    const update = (messages: LocalMessage[]) => {
       const updatedMessages = messages.reduce<MessageResponse[]>((acc, msg) => {
         if (msg.quoted_message_id === message.id) {
           acc.push({
@@ -757,12 +759,11 @@ export class ChannelState {
   }
 
   private findTargetMessageSet(
-    newMessages: MessageResponse[],
+    newMessages: (MessageResponse | LocalMessage)[],
     addIfDoesNotExist = true,
     messageSetToAddToIfDoesNotExist: MessageSetType = 'current',
   ) {
-    let messagesToAdd: (MessageResponse | ReturnType<ChannelState['formatMessage']>)[] =
-      newMessages;
+    let messagesToAdd: (MessageResponse | LocalMessage)[] = newMessages;
     let targetMessageSetIndex!: number;
     if (addIfDoesNotExist) {
       const overlappingMessageSetIndices = this.messageSets