stream-chat 8.38.0 → 8.40.0

package/src/constants.ts

@@ -0,0 +1,4 @@
+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: true, hasPrev: true };

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './client_state';
 export * from './channel';
 export * from './channel_state';
 export * from './thread';
+export * from './thread_manager';
 export * from './connection';
 export * from './events';
 export * from './moderation';
@@ -15,3 +16,4 @@ export * from './types';
 export * from './segment';
 export * from './campaign';
 export { isOwnUser, chatCodes, logChatPromiseExecution, formatMessage } from './utils';
+export * from './store';

package/src/store.ts

@@ -0,0 +1,57 @@
+export type Patch<T> = (value: T) => T;
+export type Handler<T> = (nextValue: T, previousValue: T | undefined) => void;
+export type Unsubscribe = () => void;
+
+function isPatch<T>(value: T | Patch<T>): value is Patch<T> {
+  return typeof value === 'function';
+}
+
+export class StateStore<T extends Record<string, unknown>> {
+  private handlerSet = new Set<Handler<T>>();
+
+  constructor(private value: T) {}
+
+  public next = (newValueOrPatch: T | Patch<T>): void => {
+    // newValue (or patch output) should never be mutated previous value
+    const newValue = isPatch(newValueOrPatch) ? newValueOrPatch(this.value) : newValueOrPatch;
+
+    // do not notify subscribers if the value hasn't changed
+    if (newValue === this.value) return;
+
+    const oldValue = this.value;
+    this.value = newValue;
+
+    this.handlerSet.forEach((handler) => handler(this.value, oldValue));
+  };
+
+  public partialNext = (partial: Partial<T>): void => this.next((current) => ({ ...current, ...partial }));
+
+  public getLatestValue = (): T => this.value;
+
+  public subscribe = (handler: Handler<T>): Unsubscribe => {
+    handler(this.value, undefined);
+    this.handlerSet.add(handler);
+    return () => {
+      this.handlerSet.delete(handler);
+    };
+  };
+
+  public subscribeWithSelector = <O extends readonly unknown[]>(selector: (nextValue: T) => O, handler: Handler<O>) => {
+    // begin with undefined to reduce amount of selector calls
+    let selectedValues: O | undefined;
+
+    const wrappedHandler: Handler<T> = (nextValue) => {
+      const newlySelectedValues = selector(nextValue);
+      const hasUpdatedValues = selectedValues?.some((value, index) => value !== newlySelectedValues[index]) ?? true;
+
+      if (!hasUpdatedValues) return;
+
+      const oldSelectedValues = selectedValues;
+      selectedValues = newlySelectedValues;
+
+      handler(newlySelectedValues, oldSelectedValues);
+    };
+
+    return this.subscribe(wrappedHandler);
+  };
+}

package/src/thread.ts

@@ -1,142 +1,505 @@
-import { StreamChat } from './client';
-import {
+import type { Channel } from './channel';
+import type { StreamChat } from './client';
+import { StateStore } from './store';
+import type {
+  AscDesc,
   DefaultGenerics,
   ExtendableGenerics,
+  FormatMessageResponse,
+  MessagePaginationOptions,
   MessageResponse,
+  ReadResponse,
   ThreadResponse,
-  ChannelResponse,
-  FormatMessageResponse,
-  ReactionResponse,
   UserResponse,
 } from './types';
-import { addToMessageList, formatMessage } from './utils';
+import { addToMessageList, findIndexInSortedArray, formatMessage, throttle } from './utils';
+
+type QueryRepliesOptions<SCG extends ExtendableGenerics> = {
+  sort?: { created_at: AscDesc }[];
+} & MessagePaginationOptions & { user?: UserResponse<SCG>; user_id?: string };
+
+export type ThreadState<SCG extends ExtendableGenerics = DefaultGenerics> = {
+  /**
+   * Determines if the thread is currently opened and on-screen. When the thread is active,
+   * all new messages are immediately marked as read.
+   */
+  active: boolean;
+  channel: Channel<SCG>;
+  createdAt: Date;
+  deletedAt: Date | null;
+  isLoading: boolean;
+  isStateStale: boolean;
+  pagination: ThreadRepliesPagination;
+  /**
+   * Thread is identified by and has a one-to-one relation with its parent message.
+   * We use parent message id as a thread id.
+   */
+  parentMessage: FormatMessageResponse<SCG>;
+  participants: ThreadResponse<SCG>['thread_participants'];
+  read: ThreadReadState;
+  replies: Array<FormatMessageResponse<SCG>>;
+  replyCount: number;
+  updatedAt: Date | null;
+};
 
-type ThreadReadStatus<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> = Record<
+export type ThreadRepliesPagination = {
+  isLoadingNext: boolean;
+  isLoadingPrev: boolean;
+  nextCursor: string | null;
+  prevCursor: string | null;
+};
+
+export type ThreadUserReadState<SCG extends ExtendableGenerics = DefaultGenerics> = {
+  lastReadAt: Date;
+  unreadMessageCount: number;
+  user: UserResponse<SCG>;
+  lastReadMessageId?: string;
+};
+
+export type ThreadReadState<SCG extends ExtendableGenerics = DefaultGenerics> = Record<
   string,
-  {
-    last_read: Date;
-    last_read_message_id: string;
-    unread_messages: number;
-    user: UserResponse<StreamChatGenerics>;
-  }
+  ThreadUserReadState<SCG> | undefined
 >;
 
-export class Thread<StreamChatGenerics extends ExtendableGenerics = DefaultGenerics> {
-  id: string;
-  latestReplies: FormatMessageResponse<StreamChatGenerics>[] = [];
-  participants: ThreadResponse['thread_participants'] = [];
-  message: FormatMessageResponse<StreamChatGenerics>;
-  channel: ChannelResponse<StreamChatGenerics>;
-  _channel: ReturnType<StreamChat<StreamChatGenerics>['channel']>;
-  replyCount = 0;
-  _client: StreamChat<StreamChatGenerics>;
-  read: ThreadReadStatus<StreamChatGenerics> = {};
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  data: Record<string, any> = {};
-
-  constructor(client: StreamChat<StreamChatGenerics>, t: ThreadResponse<StreamChatGenerics>) {
-    const {
-      parent_message_id,
-      parent_message,
-      latest_replies,
-      thread_participants,
-      reply_count,
-      channel,
-      read,
-      ...data
-    } = t;
-
-    this.id = parent_message_id;
-    this.message = formatMessage(parent_message);
-    this.latestReplies = latest_replies.map(formatMessage);
-    this.participants = thread_participants;
-    this.replyCount = reply_count;
-    this.channel = channel;
-    this._channel = client.channel(t.channel.type, t.channel.id);
-    this._client = client;
-    if (read) {
-      for (const r of read) {
-        this.read[r.user.id] = {
-          ...r,
-          last_read: new Date(r.last_read),
-        };
-      }
-    }
-    this.data = data;
-  }
+const DEFAULT_PAGE_LIMIT = 50;
+const DEFAULT_SORT: { created_at: AscDesc }[] = [{ created_at: -1 }];
+const MARK_AS_READ_THROTTLE_TIMEOUT = 1000;
+
+export class Thread<SCG extends ExtendableGenerics = DefaultGenerics> {
+  public readonly state: StateStore<ThreadState<SCG>>;
+  public readonly id: string;
+
+  private client: StreamChat<SCG>;
+  private unsubscribeFunctions: Set<() => void> = new Set();
+  private failedRepliesMap: Map<string, FormatMessageResponse<SCG>> = new Map();
 
-  getClient(): StreamChat<StreamChatGenerics> {
-    return this._client;
+  constructor({ client, threadData }: { client: StreamChat<SCG>; threadData: ThreadResponse<SCG> }) {
+    this.state = new StateStore<ThreadState<SCG>>({
+      active: false,
+      channel: client.channel(threadData.channel.type, threadData.channel.id),
+      createdAt: new Date(threadData.created_at),
+      deletedAt: threadData.deleted_at ? new Date(threadData.deleted_at) : null,
+      isLoading: false,
+      isStateStale: false,
+      pagination: repliesPaginationFromInitialThread(threadData),
+      parentMessage: formatMessage(threadData.parent_message),
+      participants: threadData.thread_participants,
+      read: formatReadState(threadData.read ?? []),
+      replies: threadData.latest_replies.map(formatMessage),
+      replyCount: threadData.reply_count ?? 0,
+      updatedAt: threadData.updated_at ? new Date(threadData.updated_at) : null,
+    });
+
+    this.id = threadData.parent_message_id;
+    this.client = client;
   }
 
-  /**
-   * addReply - Adds or updates a latestReplies to the thread
-   *
-   * @param {MessageResponse<StreamChatGenerics>} message reply message to be added.
-   */
-  addReply(message: MessageResponse<StreamChatGenerics>) {
-    if (message.parent_id !== this.message.id) {
-      throw new Error('Message does not belong to this thread');
-    }
+  get channel() {
+    return this.state.getLatestValue().channel;
+  }
 
-    this.latestReplies = addToMessageList(this.latestReplies, formatMessage(message), true);
+  get hasStaleState() {
+    return this.state.getLatestValue().isStateStale;
   }
 
-  updateReply(message: MessageResponse<StreamChatGenerics>) {
-    this.latestReplies = this.latestReplies.map((m) => {
-      if (m.id === message.id) {
-        return formatMessage(message);
-      }
-      return m;
-    });
+  get ownUnreadCount() {
+    return ownUnreadCountSelector(this.client.userID)(this.state.getLatestValue());
   }
 
-  updateMessageOrReplyIfExists(message: MessageResponse<StreamChatGenerics>) {
-    if (!message.parent_id && message.id !== this.message.id) {
+  public activate = () => {
+    this.state.partialNext({ active: true });
+  };
+
+  public deactivate = () => {
+    this.state.partialNext({ active: false });
+  };
+
+  public reload = async () => {
+    if (this.state.getLatestValue().isLoading) {
       return;
     }
 
-    if (message.parent_id && message.parent_id !== this.message.id) {
-      return;
+    this.state.partialNext({ isLoading: true });
+
+    try {
+      const thread = await this.client.getThread(this.id, { watch: true });
+      this.hydrateState(thread);
+    } finally {
+      this.state.partialNext({ isLoading: false });
     }
+  };
 
-    if (message.parent_id && message.parent_id === this.message.id) {
-      this.updateReply(message);
+  public hydrateState = (thread: Thread<SCG>) => {
+    if (thread === this) {
+      // skip if the instances are the same
       return;
     }
 
-    if (!message.parent_id && message.id === this.message.id) {
-      this.message = formatMessage(message);
+    if (thread.id !== this.id) {
+      throw new Error("Cannot hydrate thread state with using thread's state");
     }
-  }
 
-  addReaction(
-    reaction: ReactionResponse<StreamChatGenerics>,
-    message?: MessageResponse<StreamChatGenerics>,
-    enforce_unique?: boolean,
-  ) {
-    if (!message) return;
-
-    this.latestReplies = this.latestReplies.map((m) => {
-      if (m.id === message.id) {
-        return formatMessage(
-          this._channel.state.addReaction(reaction, message, enforce_unique) as MessageResponse<StreamChatGenerics>,
-        );
+    const {
+      read,
+      replyCount,
+      replies,
+      parentMessage,
+      participants,
+      createdAt,
+      deletedAt,
+      updatedAt,
+    } = thread.state.getLatestValue();
+
+    // Preserve pending replies and append them to the updated list of replies
+    const pendingReplies = Array.from(this.failedRepliesMap.values());
+
+    this.state.partialNext({
+      read,
+      replyCount,
+      replies: pendingReplies.length ? replies.concat(pendingReplies) : replies,
+      parentMessage,
+      participants,
+      createdAt,
+      deletedAt,
+      updatedAt,
+      isStateStale: false,
+    });
+  };
+
+  public registerSubscriptions = () => {
+    if (this.unsubscribeFunctions.size) {
+      // Thread is already listening for events and changes
+      return;
+    }
+
+    this.unsubscribeFunctions.add(this.subscribeMarkActiveThreadRead());
+    this.unsubscribeFunctions.add(this.subscribeReloadActiveStaleThread());
+    this.unsubscribeFunctions.add(this.subscribeMarkThreadStale());
+    this.unsubscribeFunctions.add(this.subscribeNewReplies());
+    this.unsubscribeFunctions.add(this.subscribeRepliesRead());
+    this.unsubscribeFunctions.add(this.subscribeReplyDeleted());
+    this.unsubscribeFunctions.add(this.subscribeMessageUpdated());
+  };
+
+  private subscribeMarkActiveThreadRead = () => {
+    return this.state.subscribeWithSelector(
+      (nextValue) => [nextValue.active, ownUnreadCountSelector(this.client.userID)(nextValue)],
+      ([active, unreadMessageCount]) => {
+        if (!active || !unreadMessageCount) return;
+        this.throttledMarkAsRead();
+      },
+    );
+  };
+
+  private subscribeReloadActiveStaleThread = () =>
+    this.state.subscribeWithSelector(
+      (nextValue) => [nextValue.active, nextValue.isStateStale],
+      ([active, isStateStale]) => {
+        if (active && isStateStale) {
+          this.reload();
+        }
+      },
+    );
+
+  private subscribeMarkThreadStale = () =>
+    this.client.on('user.watching.stop', (event) => {
+      const { channel } = this.state.getLatestValue();
+
+      if (!this.client.userID || this.client.userID !== event.user?.id || event.channel?.cid !== channel.cid) {
+        return;
+      }
+
+      this.state.partialNext({ isStateStale: true });
+    }).unsubscribe;
+
+  private subscribeNewReplies = () =>
+    this.client.on('message.new', (event) => {
+      if (!this.client.userID || event.message?.parent_id !== this.id) {
+        return;
+      }
+
+      const isOwnMessage = event.message.user?.id === this.client.userID;
+      const { active, read } = this.state.getLatestValue();
+
+      this.upsertReplyLocally({
+        message: event.message,
+        // Message from current user could have been added optimistically,
+        // so the actual timestamp might differ in the event
+        timestampChanged: isOwnMessage,
+      });
+
+      if (active) {
+        this.throttledMarkAsRead();
+      }
+
+      const nextRead: ThreadReadState = {};
+
+      for (const userId of Object.keys(read)) {
+        const userRead = read[userId];
+
+        if (userRead) {
+          let nextUserRead: ThreadUserReadState = userRead;
+
+          if (userId === event.user?.id) {
+            // The user who just sent a message to the thread has no unread messages
+            // in that thread
+            nextUserRead = {
+              ...nextUserRead,
+              lastReadAt: event.created_at ? new Date(event.created_at) : new Date(),
+              user: event.user,
+              unreadMessageCount: 0,
+            };
+          } else if (active && userId === this.client.userID) {
+            // Do not increment unread count for the current user in an active thread
+          } else {
+            // Increment unread count for all users except the author of the new message
+            nextUserRead = {
+              ...nextUserRead,
+              unreadMessageCount: userRead.unreadMessageCount + 1,
+            };
+          }
+
+          nextRead[userId] = nextUserRead;
+        }
+      }
+
+      this.state.partialNext({ read: nextRead });
+    }).unsubscribe;
+
+  private subscribeRepliesRead = () =>
+    this.client.on('message.read', (event) => {
+      if (!event.user || !event.created_at || !event.thread) return;
+      if (event.thread.parent_message_id !== this.id) return;
+
+      const userId = event.user.id;
+      const createdAt = event.created_at;
+      const user = event.user;
+
+      this.state.next((current) => ({
+        ...current,
+        read: {
+          ...current.read,
+          [userId]: {
+            lastReadAt: new Date(createdAt),
+            user,
+            lastReadMessageId: event.last_read_message_id,
+            unreadMessageCount: 0,
+          },
+        },
+      }));
+    }).unsubscribe;
+
+  private subscribeReplyDeleted = () =>
+    this.client.on('message.deleted', (event) => {
+      if (event.message?.parent_id === this.id && event.hard_delete) {
+        return this.deleteReplyLocally({ message: event.message });
       }
-      return m;
+    }).unsubscribe;
+
+  private subscribeMessageUpdated = () => {
+    const unsubscribeFunctions = ['message.updated', 'reaction.new', 'reaction.deleted'].map(
+      (eventType) =>
+        this.client.on(eventType, (event) => {
+          if (event.message) {
+            this.updateParentMessageOrReplyLocally(event.message);
+          }
+        }).unsubscribe,
+    );
+
+    return () => unsubscribeFunctions.forEach((unsubscribe) => unsubscribe());
+  };
+
+  public unregisterSubscriptions = () => {
+    this.unsubscribeFunctions.forEach((cleanupFunction) => cleanupFunction());
+    this.unsubscribeFunctions.clear();
+  };
+
+  public deleteReplyLocally = ({ message }: { message: MessageResponse<SCG> }) => {
+    const { replies } = this.state.getLatestValue();
+
+    const index = findIndexInSortedArray({
+      needle: formatMessage(message),
+      sortedArray: replies,
+      sortDirection: 'ascending',
+      selectValueToCompare: (reply) => reply.created_at.getTime(),
     });
-  }
 
-  removeReaction(reaction: ReactionResponse<StreamChatGenerics>, message?: MessageResponse<StreamChatGenerics>) {
-    if (!message) return;
+    const actualIndex =
+      replies[index]?.id === message.id ? index : replies[index - 1]?.id === message.id ? index - 1 : null;
+
+    if (actualIndex === null) {
+      return;
+    }
+
+    const updatedReplies = [...replies];
+    updatedReplies.splice(actualIndex, 1);
+
+    this.state.partialNext({
+      replies: updatedReplies,
+    });
+  };
+
+  public upsertReplyLocally = ({
+    message,
+    timestampChanged = false,
+  }: {
+    message: MessageResponse<SCG>;
+    timestampChanged?: boolean;
+  }) => {
+    if (message.parent_id !== this.id) {
+      throw new Error('Reply does not belong to this thread');
+    }
+
+    const formattedMessage = formatMessage(message);
+
+    if (message.status === 'failed') {
+      // store failed reply so that it's not lost when reloading or hydrating
+      this.failedRepliesMap.set(formattedMessage.id, formattedMessage);
+    } else if (this.failedRepliesMap.has(message.id)) {
+      this.failedRepliesMap.delete(message.id);
+    }
+
+    this.state.next((current) => ({
+      ...current,
+      replies: addToMessageList(current.replies, formattedMessage, timestampChanged),
+    }));
+  };
+
+  public updateParentMessageLocally = (message: MessageResponse<SCG>) => {
+    if (message.id !== this.id) {
+      throw new Error('Message does not belong to this thread');
+    }
+
+    this.state.next((current) => {
+      const formattedMessage = formatMessage(message);
+
+      const newData: typeof current = {
+        ...current,
+        deletedAt: formattedMessage.deleted_at,
+        parentMessage: formattedMessage,
+        replyCount: message.reply_count ?? current.replyCount,
+      };
 
-    this.latestReplies = this.latestReplies.map((m) => {
-      if (m.id === message.id) {
-        return formatMessage(
-          this._channel.state.removeReaction(reaction, message) as MessageResponse<StreamChatGenerics>,
-        );
+      // update channel on channelData change (unlikely but handled anyway)
+      if (message.channel) {
+        newData['channel'] = this.client.channel(message.channel.type, message.channel.id, message.channel);
       }
-      return m;
+
+      return newData;
     });
-  }
+  };
+
+  public updateParentMessageOrReplyLocally = (message: MessageResponse<SCG>) => {
+    if (message.parent_id === this.id) {
+      this.upsertReplyLocally({ message });
+    }
+
+    if (!message.parent_id && message.id === this.id) {
+      this.updateParentMessageLocally(message);
+    }
+  };
+
+  public markAsRead = async ({ force = false }: { force?: boolean } = {}) => {
+    if (this.ownUnreadCount === 0 && !force) {
+      return null;
+    }
+
+    return await this.channel.markRead({ thread_id: this.id });
+  };
+
+  private throttledMarkAsRead = throttle(() => this.markAsRead(), MARK_AS_READ_THROTTLE_TIMEOUT, { trailing: true });
+
+  public queryReplies = ({
+    limit = DEFAULT_PAGE_LIMIT,
+    sort = DEFAULT_SORT,
+    ...otherOptions
+  }: QueryRepliesOptions<SCG> = {}) => {
+    return this.channel.getReplies(this.id, { limit, ...otherOptions }, sort);
+  };
+
+  public loadNextPage = ({ limit = DEFAULT_PAGE_LIMIT }: { limit?: number } = {}) => {
+    return this.loadPage(limit);
+  };
+
+  public loadPrevPage = ({ limit = DEFAULT_PAGE_LIMIT }: { limit?: number } = {}) => {
+    return this.loadPage(-limit);
+  };
+
+  private loadPage = async (count: number) => {
+    const { pagination } = this.state.getLatestValue();
+    const [loadingKey, cursorKey, insertionMethodKey] =
+      count > 0
+        ? (['isLoadingNext', 'nextCursor', 'push'] as const)
+        : (['isLoadingPrev', 'prevCursor', 'unshift'] as const);
+
+    if (pagination[loadingKey] || pagination[cursorKey] === null) return;
+
+    const queryOptions = { [count > 0 ? 'id_gt' : 'id_lt']: pagination[cursorKey] };
+    const limit = Math.abs(count);
+
+    this.state.partialNext({ pagination: { ...pagination, [loadingKey]: true } });
+
+    try {
+      const data = await this.queryReplies({ ...queryOptions, limit });
+      const replies = data.messages.map(formatMessage);
+      const maybeNextCursor = replies.at(count > 0 ? -1 : 0)?.id ?? null;
+
+      this.state.next((current) => {
+        let nextReplies = current.replies;
+
+        // prevent re-creating array if there's nothing to add to the current one
+        if (replies.length > 0) {
+          nextReplies = [...current.replies];
+          nextReplies[insertionMethodKey](...replies);
+        }
+
+        return {
+          ...current,
+          replies: nextReplies,
+          pagination: {
+            ...current.pagination,
+            [cursorKey]: data.messages.length < limit ? null : maybeNextCursor,
+            [loadingKey]: false,
+          },
+        };
+      });
+    } catch (error) {
+      this.client.logger('error', (error as Error).message);
+      this.state.next((current) => ({
+        ...current,
+        pagination: {
+          ...current.pagination,
+          [loadingKey]: false,
+        },
+      }));
+    }
+  };
 }
+
+const formatReadState = (read: ReadResponse[]): ThreadReadState =>
+  read.reduce<ThreadReadState>((state, userRead) => {
+    state[userRead.user.id] = {
+      user: userRead.user,
+      lastReadMessageId: userRead.last_read_message_id,
+      unreadMessageCount: userRead.unread_messages ?? 0,
+      lastReadAt: new Date(userRead.last_read),
+    };
+    return state;
+  }, {});
+
+const repliesPaginationFromInitialThread = (thread: ThreadResponse): ThreadRepliesPagination => {
+  const latestRepliesContainsAllReplies = thread.latest_replies.length === thread.reply_count;
+
+  return {
+    nextCursor: null,
+    prevCursor: latestRepliesContainsAllReplies ? null : thread.latest_replies.at(0)?.id ?? null,
+    isLoadingNext: false,
+    isLoadingPrev: false,
+  };
+};
+
+const ownUnreadCountSelector = (currentUserId: string | undefined) => <
+  SCG extends ExtendableGenerics = DefaultGenerics
+>(
+  state: ThreadState<SCG>,
+) => (currentUserId && state.read[currentUserId]?.unreadMessageCount) || 0;