stream-chat 9.6.1 → 9.8.0

package/dist/types/search/types.d.ts

@@ -0,0 +1,20 @@
+export type SearchSourceState<T = any> = {
+    hasNext: boolean;
+    isActive: boolean;
+    isLoading: boolean;
+    items: T[] | undefined;
+    searchQuery: string;
+    lastQueryError?: Error;
+    next?: string | null;
+    offset?: number;
+};
+export type SearchSourceOptions = {
+    /** The number of milliseconds to debounce the search query. The default interval is 300ms. */
+    debounceMs?: number;
+    pageSize?: number;
+};
+export type SearchSourceType = 'channels' | 'users' | 'messages' | (string & {});
+export type QueryReturnValue<T> = {
+    items: T[];
+    next?: string | null;
+};

package/dist/types/types.d.ts

@@ -2931,7 +2931,7 @@ export type ReminderAPIResponse = APIResponse & {
 };
 export type CreateReminderOptions = {
     messageId: string;
-    remind_at?: string;
+    remind_at?: string | null;
     user_id?: string;
 };
 export type UpdateReminderOptions = CreateReminderOptions;
@@ -2952,7 +2952,7 @@ export type QueryRemindersResponse = {
     prev?: string;
     next?: string;
 };
-export type HookType = 'webhook' | 'sqs' | 'sns';
+export type HookType = 'webhook' | 'sqs' | 'sns' | 'pending_message';
 export type EventHook = {
     id?: string;
     hook_type?: HookType;
@@ -2971,6 +2971,10 @@ export type EventHook = {
     sns_key?: string;
     sns_secret?: string;
     sns_role_arn?: string;
+    timeout_ms?: number;
+    callback?: {
+        mode: 'CALLBACK_MODE_NONE' | 'CALLBACK_MODE_REST' | 'CALLBACK_MODE_TWIRP';
+    };
     created_at?: string;
     updated_at?: string;
 };

package/dist/types/utils.d.ts

@@ -47,11 +47,20 @@ export declare function removeConnectionEventListeners(cb: (e: Event) => void):
 export declare const axiosParamsSerializer: AxiosRequestConfig['paramsSerializer'];
 /**
  * Takes the message object, parses the dates, sets `__html`
- * and sets the status to `received` if missing; returns a new message object.
+ * and sets the status to `received` if missing; returns a new LocalMessage object.
  *
- * @param {MessageResponse} message `MessageResponse` object
+ * @param {LocalMessage} message `LocalMessage` object
  */
 export declare function formatMessage(message: MessageResponse | MessageResponseBase | LocalMessage): LocalMessage;
+/**
+ * @private
+ *
+ * Takes a LocalMessage, parses the dates back to strings,
+ * and converts the message back to a MessageResponse.
+ *
+ * @param {MessageResponse} message `MessageResponse` object
+ */
+export declare function unformatMessage(message: LocalMessage): MessageResponse;
 export declare const localMessageToNewMessagePayload: (localMessage: LocalMessage) => Message;
 export declare const toUpdatedMessagePayload: (message: LocalMessage | Partial<MessageResponse>) => UpdatedMessage;
 export declare const findIndexInSortedArray: <T, L>({ needle, sortedArray, selectKey, selectValueToCompare, sortDirection, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.6.1",
+  "version": "9.8.0",
   "description": "JS SDK for the Stream Chat API",
   "homepage": "https://getstream.io/chat/",
   "author": {

package/src/channel.ts

@@ -406,6 +406,17 @@ export class Channel {
     );
   }
 
+  /**
+   * sendReaction - Sends a reaction to a message. If offline support is enabled, it will make sure
+   * that sending the reaction is queued up if it fails due to bad internet conditions and executed
+   * later.
+   *
+   * @param {string} messageID the message id
+   * @param {Reaction} reaction the reaction object for instance {type: 'love'}
+   * @param {{ enforce_unique?: boolean, skip_push?: boolean }} [options] Option object, {enforce_unique: true, skip_push: true} to override any existing reaction or skip sending push notifications
+   *
+   * @return {Promise<ReactionAPIResponse>} The Server Response
+   */
   async sendReaction(
     messageID: string,
     reaction: Reaction,
@@ -421,7 +432,7 @@ export class Channel {
     try {
       const offlineDb = this.getClient().offlineDb;
       if (offlineDb) {
-        return (await offlineDb.queueTask({
+        return await offlineDb.queueTask<ReactionAPIResponse>({
           task: {
             channelId: this.id as string,
             channelType: this.type,
@@ -429,7 +440,7 @@ export class Channel {
             payload: [messageID, reaction, options],
             type: 'send-reaction',
           },
-        })) as ReactionAPIResponse;
+        });
       }
     } catch (error) {
       this._client.logger('error', `offlineDb:send-reaction`, {
@@ -1463,9 +1474,7 @@ export class Channel {
     this.getClient().polls.hydratePollCache(state.messages, true);
     this.getClient().reminders.hydrateState(state.messages);
 
-    if (state.draft) {
-      this.messageComposer.initState({ composition: state.draft });
-    }
+    this.messageComposer.initStateFromChannelResponse(state);
 
     const areCapabilitiesChanged =
       [...(state.channel.own_capabilities || [])].sort().join() !==
@@ -1613,13 +1622,11 @@ export class Channel {
   /**
    * createDraft - Creates or updates a draft message in a channel
    *
-   * @param {string} channelType The channel type
-   * @param {string} channelID The channel ID
    * @param {DraftMessagePayload} message The draft message to create or update
    *
    * @return {Promise<CreateDraftResponse>} Response containing the created draft
    */
-  async createDraft(message: DraftMessagePayload) {
+  async _createDraft(message: DraftMessagePayload) {
     return await this.getClient().post<CreateDraftResponse>(
       this._channelURL() + '/draft',
       {
@@ -1629,19 +1636,87 @@ export class Channel {
   }
 
   /**
-   * deleteDraft - Deletes a draft message from a channel
+   * createDraft - Creates or updates a draft message in a channel. If offline support is
+   * enabled, it will make sure that creating the draft is queued up if it fails due to
+   * bad internet conditions and executed later.
+   *
+   * @param {DraftMessagePayload} message The draft message to create or update
+   *
+   * @return {Promise<CreateDraftResponse>} Response containing the created draft
+   */
+  async createDraft(message: DraftMessagePayload) {
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask<CreateDraftResponse>({
+          task: {
+            channelId: this.id as string,
+            channelType: this.type,
+            threadId: message.parent_id,
+            payload: [message],
+            type: 'create-draft',
+          },
+        });
+      }
+    } catch (error) {
+      this._client.logger('error', `offlineDb:create-draft`, {
+        tags: ['channel', 'offlineDb'],
+        error,
+      });
+    }
+
+    return this._createDraft(message);
+  }
+
+  /**
+   * deleteDraft - Deletes a draft message from a channel or a thread.
    *
    * @param {Object} options
    * @param {string} options.parent_id Optional parent message ID for drafts in threads
    *
    * @return {Promise<APIResponse>} API response
    */
-  async deleteDraft({ parent_id }: { parent_id?: string } = {}) {
+  async _deleteDraft({ parent_id }: { parent_id?: string } = {}) {
     return await this.getClient().delete<APIResponse>(this._channelURL() + '/draft', {
       parent_id,
     });
   }
 
+  /**
+   * deleteDraft - Deletes a draft message from a channel or a thread. If offline support is
+   * enabled, it will make sure that deleting the draft is queued up if it fails due to
+   * bad internet conditions and executed later.
+   *
+   * @param {Object} options
+   * @param {string} options.parent_id Optional parent message ID for drafts in threads
+   *
+   * @return {Promise<APIResponse>} API response
+   */
+  async deleteDraft(options: { parent_id?: string } = {}) {
+    const { parent_id } = options;
+    try {
+      const offlineDb = this.getClient().offlineDb;
+      if (offlineDb) {
+        return await offlineDb.queueTask<APIResponse>({
+          task: {
+            channelId: this.id as string,
+            channelType: this.type,
+            threadId: parent_id,
+            payload: [options],
+            type: 'delete-draft',
+          },
+        });
+      }
+    } catch (error) {
+      this._client.logger('error', `offlineDb:delete-draft`, {
+        tags: ['channel', 'offlineDb'],
+        error,
+      });
+    }
+
+    return this._deleteDraft(options);
+  }
+
   /**
    * getDraft - Retrieves a draft message from a channel
    *

package/src/client.ts

@@ -1969,9 +1969,7 @@ export class StreamChat {
         this.reminders.hydrateState(channelState.messages);
       }
 
-      if (channelState.draft) {
-        c.messageComposer.initState({ composition: channelState.draft });
-      }
+      c.messageComposer.initStateFromChannelResponse(channelState);
 
       channels.push(c);
     }
@@ -4570,4 +4568,64 @@ export class StreamChat {
       ...rest,
     });
   }
+
+  /**
+   * uploadFile - Uploads a file to the configured storage (defaults to Stream CDN)
+   *
+   * @param {string|NodeJS.ReadableStream|Buffer|File} uri The file to upload
+   * @param {string} [name] The name of the file
+   * @param {string} [contentType] The content type of the file
+   * @param {UserResponse} [user] Optional user information
+   *
+   * @return {Promise<SendFileAPIResponse>} Response containing the file URL
+   */
+  uploadFile(
+    uri: string | NodeJS.ReadableStream | Buffer | File,
+    name?: string,
+    contentType?: string,
+    user?: UserResponse,
+  ) {
+    return this.sendFile(`${this.baseURL}/uploads/file`, uri, name, contentType, user);
+  }
+
+  /**
+   * uploadImage - Uploads an image to the configured storage (defaults to Stream CDN)
+   *
+   * @param {string|NodeJS.ReadableStream|File} uri The image to upload
+   * @param {string} [name] The name of the image
+   * @param {string} [contentType] The content type of the image
+   * @param {UserResponse} [user] Optional user information
+   *
+   * @return {Promise<SendFileAPIResponse>} Response containing the image URL
+   */
+  uploadImage(
+    uri: string | NodeJS.ReadableStream | File,
+    name?: string,
+    contentType?: string,
+    user?: UserResponse,
+  ) {
+    return this.sendFile(`${this.baseURL}/uploads/image`, uri, name, contentType, user);
+  }
+
+  /**
+   * deleteFile - Deletes a file from the configured storage
+   *
+   * @param {string} url The URL of the file to delete
+   *
+   * @return {Promise<APIResponse>} The server response
+   */
+  deleteFile(url: string) {
+    return this.delete<APIResponse>(`${this.baseURL}/uploads/file`, { url });
+  }
+
+  /**
+   * deleteImage - Deletes an image from the configured storage
+   *
+   * @param {string} url The URL of the image to delete
+   *
+   * @return {Promise<APIResponse>} The server response
+   */
+  deleteImage(url: string) {
+    return this.delete<APIResponse>(`${this.baseURL}/uploads/image`, { url });
+  }
 }

package/src/messageComposer/messageComposer.ts

@@ -10,11 +10,12 @@ import {
   MessageDraftComposerMiddlewareExecutor,
 } from './middleware';
 import { StateStore } from '../store';
-import { formatMessage, generateUUIDv4, isLocalMessage } from '../utils';
+import { formatMessage, generateUUIDv4, isLocalMessage, unformatMessage } from '../utils';
 import { mergeWith } from '../utils/mergeWith';
 import { Channel } from '../channel';
 import { Thread } from '../thread';
 import type {
+  ChannelAPIResponse,
   DraftMessage,
   DraftResponse,
   EventTypes,
@@ -280,6 +281,10 @@ export class MessageComposer extends WithSubscriptions {
   }
 
   get hasSendableData() {
+    // If the offline mode is enabled, we allow sending a message if the composition is not empty.
+    if (this.client.offlineDb) {
+      return !this.compositionIsEmpty;
+    }
     return !!(
       (!this.attachmentManager.uploadsInProgressCount &&
         (!this.textComposer.textIsEmpty ||
@@ -342,6 +347,25 @@ export class MessageComposer extends WithSubscriptions {
     }
   };
 
+  initStateFromChannelResponse = (channelApiResponse: ChannelAPIResponse) => {
+    if (this.channel.cid !== channelApiResponse.channel.cid) {
+      return;
+    }
+    if (channelApiResponse.draft) {
+      this.initState({ composition: channelApiResponse.draft });
+    } else if (this.state.getLatestValue().draftId) {
+      this.clear();
+      this.client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.deleteDraft({
+            cid: this.channel.cid,
+            parent_id: undefined, // makes sure that we don't delete thread drafts while upserting channels
+          }),
+        { method: 'deleteDraft' },
+      );
+    }
+  };
+
   initEditingAuditState = (
     composition?: DraftResponse | MessageResponse | LocalMessage,
   ) => initEditingAuditState(composition);
@@ -360,6 +384,16 @@ export class MessageComposer extends WithSubscriptions {
     });
   }
 
+  public registerDraftEventSubscriptions = () => {
+    const unsubscribeDraftUpdated = this.subscribeDraftUpdated();
+    const unsubscribeDraftDeleted = this.subscribeDraftDeleted();
+
+    return () => {
+      unsubscribeDraftUpdated();
+      unsubscribeDraftDeleted();
+    };
+  };
+
   public registerSubscriptions = (): UnregisterSubscriptions => {
     if (!this.hasSubscriptions) {
       this.addUnsubscribeFunction(this.subscribeMessageComposerSetupStateChange());
@@ -438,7 +472,7 @@ export class MessageComposer extends WithSubscriptions {
       const draft = event.draft as DraftResponse;
       if (
         !draft ||
-        !!draft.parent_id !== !!this.threadId ||
+        (draft.parent_id ?? null) !== (this.threadId ?? null) ||
         draft.channel_cid !== this.channel.cid
       )
         return;
@@ -450,7 +484,7 @@ export class MessageComposer extends WithSubscriptions {
       const draft = event.draft as DraftResponse;
       if (
         !draft ||
-        !!draft.parent_id !== !!this.threadId ||
+        (draft.parent_id ?? null) !== (this.threadId ?? null) ||
         draft.channel_cid !== this.channel.cid
       ) {
         return;
@@ -548,7 +582,7 @@ export class MessageComposer extends WithSubscriptions {
     });
 
   private subscribeMessageComposerConfigStateChanged = () => {
-    let draftUnsubscribeFunctions: Unsubscribe[] | null;
+    let draftUnsubscribeFunction: Unsubscribe | null;
 
     const unsubscribe = this.configState.subscribeWithSelector(
       (currentValue) => ({
@@ -563,20 +597,17 @@ export class MessageComposer extends WithSubscriptions {
           });
         }
 
-        if (draftsEnabled && !draftUnsubscribeFunctions) {
-          draftUnsubscribeFunctions = [
-            this.subscribeDraftUpdated(),
-            this.subscribeDraftDeleted(),
-          ];
-        } else if (!draftsEnabled && draftUnsubscribeFunctions) {
-          draftUnsubscribeFunctions.forEach((fn) => fn());
-          draftUnsubscribeFunctions = null;
+        if (draftsEnabled && !draftUnsubscribeFunction) {
+          draftUnsubscribeFunction = this.registerDraftEventSubscriptions();
+        } else if (!draftsEnabled && draftUnsubscribeFunction) {
+          draftUnsubscribeFunction();
+          draftUnsubscribeFunction = null;
         }
       },
     );
 
     return () => {
-      draftUnsubscribeFunctions?.forEach((unsubscribe) => unsubscribe());
+      draftUnsubscribeFunction?.();
       unsubscribe();
     };
   };
@@ -658,6 +689,25 @@ export class MessageComposer extends WithSubscriptions {
     if (!composition) return;
     const { draft } = composition;
     this.state.partialNext({ draftId: draft.id });
+    if (this.client.offlineDb) {
+      try {
+        const optimisticDraftResponse = {
+          channel_cid: this.channel.cid,
+          created_at: new Date().toISOString(),
+          message: draft as DraftMessage,
+          parent_id: draft.parent_id,
+          quoted_message: this.quotedMessage
+            ? unformatMessage(this.quotedMessage)
+            : undefined,
+        };
+        await this.client.offlineDb.upsertDraft({ draft: optimisticDraftResponse });
+      } catch (error) {
+        this.client.logger('error', `offlineDb:upsertDraft`, {
+          tags: ['channel', 'offlineDb'],
+          error,
+        });
+      }
+    }
     this.logDraftUpdateTimestamp();
     await this.channel.createDraft(draft);
   };
@@ -665,8 +715,64 @@ export class MessageComposer extends WithSubscriptions {
   deleteDraft = async () => {
     if (this.editedMessage || !this.config.drafts.enabled || !this.draftId) return;
     this.state.partialNext({ draftId: null }); // todo: should we clear the whole state?
+    const parentId = this.threadId ?? undefined;
+    if (this.client.offlineDb) {
+      try {
+        await this.client.offlineDb.deleteDraft({
+          cid: this.channel.cid,
+          parent_id: parentId,
+        });
+      } catch (error) {
+        this.client.logger('error', `offlineDb:deleteDraft`, {
+          tags: ['channel', 'offlineDb'],
+          error,
+        });
+      }
+    }
     this.logDraftUpdateTimestamp();
-    await this.channel.deleteDraft({ parent_id: this.threadId ?? undefined });
+    await this.channel.deleteDraft({ parent_id: parentId });
+  };
+
+  getDraft = async () => {
+    if (this.editedMessage || !this.config.drafts.enabled || !this.client.userID) return;
+
+    const draftFromOfflineDB = await this.client.offlineDb?.getDraft({
+      cid: this.channel.cid,
+      userId: this.client.userID,
+      parent_id: this.threadId ?? undefined,
+    });
+
+    if (draftFromOfflineDB) {
+      this.initState({ composition: draftFromOfflineDB });
+    }
+
+    try {
+      const response = await this.channel.getDraft({
+        parent_id: this.threadId ?? undefined,
+      });
+
+      const { draft } = response;
+
+      if (!draft) return;
+
+      this.client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.upsertDraft({
+            draft,
+          }),
+        { method: 'upsertDraft' },
+      );
+
+      this.initState({ composition: draft });
+    } catch (error) {
+      this.client.notifications.add({
+        message: 'Failed to get the draft',
+        origin: {
+          emitter: 'MessageComposer',
+          context: { composer: this },
+        },
+      });
+    }
   };
 
   createPoll = async () => {

package/src/messageComposer/middleware/messageComposer/commandInjection.ts

@@ -0,0 +1,72 @@
+import type { MessageComposer } from '../../messageComposer';
+import type {
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+  MessageDraftComposerMiddlewareValueState,
+  MessageDraftCompositionMiddleware,
+} from '../messageComposer/types';
+import type { MiddlewareHandlerParams } from '../../../middleware';
+
+export const createCommandInjectionMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.localMessage;
+
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+
+      return next({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          text: enrichedText,
+        },
+        message: {
+          ...state.message,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/command-string-injection',
+});
+
+export const createDraftCommandInjectionMiddleware = (
+  composer: MessageComposer,
+): MessageDraftCompositionMiddleware => ({
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.draft;
+
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+
+      return next({
+        ...state,
+        draft: {
+          ...state.draft,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/draft-command-string-injection',
+});

package/src/messageComposer/middleware/messageComposer/index.ts

@@ -7,3 +7,4 @@ export * from './MessageComposerMiddlewareExecutor';
 export * from './messageComposerState';
 export * from './textComposer';
 export * from './types';
+export * from './commandInjection';

package/src/messageComposer/middleware/textComposer/activeCommandGuard.ts

@@ -0,0 +1,20 @@
+import type { Middleware } from '../../../middleware';
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+
+export type PreCommandMiddleware = Middleware<
+  TextComposerMiddlewareExecutorState,
+  'onChange' | 'onSuggestionItemSelect'
+>;
+
+export const createActiveCommandGuardMiddleware = (): PreCommandMiddleware => ({
+  handlers: {
+    onChange: ({ complete, forward, state }) => {
+      if (state.command) {
+        return complete(state);
+      }
+      return forward();
+    },
+    onSuggestionItemSelect: ({ forward }) => forward(),
+  },
+  id: 'stream-io/text-composer/active-command-guard',
+});

package/src/messageComposer/middleware/textComposer/commandStringExtraction.ts

@@ -0,0 +1,56 @@
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+import type { CommandSuggestion } from './types';
+import type { Middleware } from '../../../middleware';
+import { escapeRegExp } from './textMiddlewareUtils';
+
+export type CommandStringExtractionMiddleware = Middleware<
+  TextComposerMiddlewareExecutorState<CommandSuggestion>,
+  'onChange' | 'onSuggestionItemSelect'
+>;
+
+const stripCommandFromText = (text: string, commandName: string) =>
+  text.replace(new RegExp(`^${escapeRegExp(`/${commandName}`)}\\s*`), '');
+
+export const createCommandStringExtractionMiddleware =
+  (): CommandStringExtractionMiddleware => ({
+    handlers: {
+      onChange: ({ complete, forward, state }) => {
+        const { command } = state;
+
+        if (!command?.name) {
+          return forward();
+        }
+
+        const newText = stripCommandFromText(state.text, command.name);
+
+        return complete({
+          ...state,
+          selection: {
+            end: newText.length,
+            start: newText.length,
+          },
+          text: newText,
+        });
+      },
+      onSuggestionItemSelect: ({ next, forward, state }) => {
+        const { command } = state;
+
+        if (!command) {
+          return forward();
+        }
+
+        const triggerWithCommand = `/${command?.name} `;
+
+        const newText = state.text.slice(triggerWithCommand.length);
+        return next({
+          ...state,
+          selection: {
+            end: newText.length,
+            start: newText.length,
+          },
+          text: newText,
+        });
+      },
+    },
+    id: 'stream-io/text-composer/command-string-extraction',
+  });