@ermis-network/ermis-chat-sdk 1.0.9 → 2.0.0

package/src/client.ts

@@ -292,7 +292,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
 
     const setTokenPromise = this._setToken(connectionUser, connectionToken);
     this._setUser(connectionUser);
-    this.state.updateUser({ id: connectionUser.id, name: connectionUser?.name || connectionUser.id, avatar: connectionUser?.avatar || '' });
+    this.state.updateUser({
+      id: connectionUser.id,
+      name: connectionUser?.name || connectionUser.id,
+      avatar: connectionUser?.avatar || '',
+    });
 
     const wsPromise = this.openConnection();
 
@@ -304,6 +308,21 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
       const result = await this.setUserPromise;
       // Call SSE after successful connect
       await this.connectToSSE();
+
+      // Automatically fetch full profile asynchronously and dispatch event
+      this.queryUser(connectionUser.id)
+        .then((fullProfile) => {
+          this.user = { ...this.user, ...fullProfile };
+          this.state.updateUser(this.user);
+          this.dispatchEvent({
+            type: 'user.updated',
+            me: this.user,
+          } as unknown as Event<ErmisChatGenerics>);
+        })
+        .catch((err) => {
+          this.logger('error', 'client:connectUser() - failed to fetch full user profile', { err });
+        });
+
       return result;
     } catch (err) {
       this.disconnectUser();
@@ -600,10 +619,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
    * @returns A Blob of the file content.
    */
   async downloadMedia(url: string): Promise<Blob> {
-    const response = await this.axiosInstance.get(url, {
-      responseType: 'blob',
-    });
-    return response.data as Blob;
+    const response = await fetch(url, { cache: 'no-store' });
+    if (!response.ok) {
+      throw new Error(`Failed to download media: ${response.statusText}`);
+    }
+    return await response.blob();
   }
 
   errorFromResponse(response: AxiosResponse<APIErrorResponse>): ErrorFromResponse<APIErrorResponse> {
@@ -709,21 +729,76 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
   };
 
   _updateMemberWatcherReferences = (user: UserResponse<ErmisChatGenerics>) => {
-    const refMap = this.state.userChannelReferences[user.id] || {};
-    for (const channelID in refMap) {
-      const channel = this.activeChannels[channelID];
+    // Iterate through all active channels to ensure we update members even if they haven't sent messages yet
+    Object.values(this.activeChannels).forEach((channel) => {
       if (channel?.state) {
+        let hasChange = false;
         if (channel.state.members[user.id]) {
-          channel.state.members[user.id].user = user;
+          channel.state.members = {
+            ...channel.state.members,
+            [user.id]: {
+              ...channel.state.members[user.id],
+              user,
+            },
+          };
+          hasChange = true;
+
+          // Update display name/image for 1-1 Messaging Channels
+          if (channel.data?.type === 'messaging') {
+            const members = Object.values(channel.state.members);
+            if (members.length === 2) {
+              const otherMember = members.find((m) => m.user?.id !== this.userID);
+              if (otherMember && otherMember.user?.id === user.id) {
+                channel.data.name = user.name || user.id;
+                channel.data.image = user.avatar || '';
+              }
+            }
+          }
         }
         if (channel.state.watchers[user.id]) {
-          channel.state.watchers[user.id] = user;
+          channel.state.watchers = {
+            ...channel.state.watchers,
+            [user.id]: user,
+          };
+          hasChange = true;
         }
         if (channel.state.read[user.id]) {
-          channel.state.read[user.id].user = user;
+          channel.state.read = {
+            ...channel.state.read,
+            [user.id]: {
+              ...channel.state.read[user.id],
+              user,
+            },
+          };
+          hasChange = true;
+        }
+
+        if (hasChange) {
+          // Trigger channel update for Sidebar and Header
+          channel._callChannelListeners({
+            type: 'channel.updated',
+            channel: channel.data,
+            cid: channel.cid,
+          } as any);
+
+          // Trigger member update specifically for Member List components
+          if (channel.state.members[user.id]) {
+            channel._callChannelListeners({
+              type: 'member.updated',
+              member: channel.state.members[user.id],
+              cid: channel.cid,
+            } as any);
+          }
+
+          // Trigger general user update at channel level
+          channel._callChannelListeners({
+            type: 'user.updated',
+            user: user,
+            cid: channel.cid,
+          } as any);
         }
       }
-    }
+    });
   };
 
   _updateUserReferences = this._updateMemberWatcherReferences;
@@ -733,13 +808,29 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
 
     for (const channelID in refMap) {
       const channel = this.activeChannels[channelID];
-
       if (!channel) continue;
 
       const state = channel.state;
 
-      /** update the messages from this user. */
+      /** Update the message objects from this user in the state. */
       state?.updateUserMessages(user);
+
+      // Trigger re-render for message list components
+      channel._callChannelListeners({
+        type: 'channel.updated',
+        channel: channel.data,
+        cid: channel.cid,
+      } as any);
+
+      // Force MessageList refresh by dispatching an update for the last message
+      const lastMessage = state?.messages[state.messages.length - 1];
+      if (lastMessage) {
+        channel._callChannelListeners({
+          type: 'message.updated',
+          message: lastMessage,
+          cid: channel.cid,
+        } as any);
+      }
     }
   };
 
@@ -822,7 +913,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
               const bTime = bLatest ? new Date(bLatest).getTime() : 0;
               return bTime - aTime;
             });
-            parentChannel._callChannelListeners({ ...event, type: 'channel.updated', channel: parentChannel.data } as any);
+            parentChannel._callChannelListeners({
+              ...event,
+              type: 'channel.updated',
+              channel: parentChannel.data,
+            } as any);
           }
         }
       });
@@ -833,7 +928,9 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
         if (parentCid && this.activeChannels[parentCid]) {
           const parentChannel = this.activeChannels[parentCid];
           if (parentChannel.state?.topics && event.channel) {
-            const topicIndex = parentChannel.state.topics.findIndex((t: any) => t.cid === event.cid || t.channel?.cid === event.cid);
+            const topicIndex = parentChannel.state.topics.findIndex(
+              (t: any) => t.cid === event.cid || t.channel?.cid === event.cid,
+            );
             if (topicIndex !== -1) {
               const t = parentChannel.state.topics[topicIndex] as any;
               if (t.data) {
@@ -844,7 +941,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
                 Object.assign(t, event.channel);
               }
             }
-            parentChannel._callChannelListeners({ ...event, type: 'channel.updated', channel: parentChannel.data } as any);
+            parentChannel._callChannelListeners({
+              ...event,
+              type: 'channel.updated',
+              channel: parentChannel.data,
+            } as any);
           }
         }
 
@@ -852,7 +953,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
           const topicChannel = this.activeChannels[event.cid];
           if (event.channel) {
             topicChannel.data = { ...topicChannel.data, ...event.channel };
-            topicChannel._callChannelListeners({ ...event, type: 'channel.updated', channel: topicChannel.data } as any);
+            topicChannel._callChannelListeners({
+              ...event,
+              type: 'channel.updated',
+              channel: topicChannel.data,
+            } as any);
           }
         }
       });
@@ -865,14 +970,20 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
         if (parentCid && this.activeChannels[parentCid]) {
           const parentChannel = this.activeChannels[parentCid];
           if (parentChannel.state?.topics) {
-            const topicIndex = parentChannel.state.topics.findIndex((t: any) => t.cid === event.cid || t.channel?.cid === event.cid);
+            const topicIndex = parentChannel.state.topics.findIndex(
+              (t: any) => t.cid === event.cid || t.channel?.cid === event.cid,
+            );
             if (topicIndex !== -1) {
               const t = parentChannel.state.topics[topicIndex] as any;
               if (t.data) t.data.is_closed_topic = isClosed;
               else if (t.channel) t.channel.is_closed_topic = isClosed;
               else t.is_closed_topic = isClosed;
             }
-            parentChannel._callChannelListeners({ ...event, type: 'channel.updated', channel: parentChannel.data } as any);
+            parentChannel._callChannelListeners({
+              ...event,
+              type: 'channel.updated',
+              channel: parentChannel.data,
+            } as any);
           }
         }
 
@@ -886,8 +997,6 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
       });
     }
 
-
-
     if (event.type === 'connection.recovered') {
       postListenerCallbacks.push(() => {
         // Auto-resend offline failed messages
@@ -944,14 +1053,11 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
         tags: ['connection', 'client'],
       });
 
-      const filter: ChannelFilters = {
-        type: ['messaging', 'team'],
-      };
-      const sort: [] = [];
-      const options = {
-        message_limit: 25,
-      };
-
+      const {
+        filter = { type: ['messaging', 'team', 'meeting'] } as ChannelFilters,
+        sort = [],
+        options = { message_limit: 1 },
+      } = this.options.recoveryConfig || {};
       await this.queryChannels(filter, sort, options);
 
       this.logger('info', 'client:recoverState() - Querying channels finished', { tags: ['connection', 'client'] });
@@ -1024,45 +1130,42 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
       const data = JSON.parse(event.data);
 
       this.logger('info', `client:connectToSSE() - SSE message received event :  ${JSON.stringify(data)}`, { event });
-
       if (data.type === 'AccountUserChainProjects') {
-        let user: UserResponse = {
-          name: data.name,
+        const userInfo: UserResponse<ErmisChatGenerics> = {
           id: data.id,
+          name: data.name,
           avatar: data.avatar,
           about_me: data.about_me,
           project_id: data.project_id,
         };
 
-        if (this.user?.id === user.id) {
-          this.user = { ...this.user, ...user };
+        // 1. Update current user info if ID matches
+        if (this.user?.id === userInfo.id) {
+          this.user = { ...this.user, ...userInfo };
         }
 
-        this.state.updateUser(user);
+        // 2. Update Client State
+        this.state.updateUser(userInfo);
 
-        const userInfo = {
-          id: user.id,
-          name: user.name ? user.name : user.id,
-          avatar: user?.avatar || '',
+        const minimalUserInfo = {
+          id: userInfo.id,
+          name: userInfo.name || userInfo.id,
+          avatar: userInfo.avatar || '',
         };
 
-        this._updateMemberWatcherReferences(userInfo);
-        this._updateUserMessageReferences(userInfo);
-
-        Object.values(this.activeChannels).forEach((channel) => {
-          if (channel.data?.type === 'messaging' && Object.keys(channel.state.members).length === 2) {
-            const otherMember = Object.values(channel.state.members).find((member) => member.user?.id !== this.userID);
-            if (otherMember && otherMember.user?.id === user.id) {
-              // Cập nhật tên và avatar channel theo user vừa đổi thông tin
-              channel.data.name = user.name || user.id;
-              channel.data.image = user.avatar || '';
-            }
-          }
-        });
+        // 3. Update references and trigger re-renders
+        this._updateMemberWatcherReferences(minimalUserInfo);
+        this._updateUserMessageReferences(minimalUserInfo);
 
         if (onCallBack) {
           onCallBack(data);
         }
+
+        this.dispatchEvent({
+          type: 'user.updated',
+          user: userInfo,
+          me: this.user?.id === userInfo.id ? this.user : undefined,
+        } as any);
       }
     };
     this.eventSource.onerror = (event: any) => {
@@ -1204,6 +1307,20 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
       this.user.avatar = response.avatar;
       const new_user = { ...this.user, avatar: response.avatar };
       this.state.updateUser(new_user);
+
+      const userInfo = {
+        id: this.user.id,
+        name: this.user.name ? this.user.name : this.user.id,
+        avatar: this.user?.avatar || '',
+      };
+
+      this._updateMemberWatcherReferences(userInfo);
+      this._updateUserMessageReferences(userInfo);
+
+      this.dispatchEvent({
+        type: 'user.updated',
+        me: this.user,
+      } as unknown as Event<ErmisChatGenerics>);
     }
 
     return response;
@@ -1212,6 +1329,23 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
     let response = await this.patch<UserResponse<ErmisChatGenerics>>(this.userBaseURL + '/users/update', updates);
     this.user = response;
     this.state.updateUser(response);
+
+    if (this.user) {
+      const userInfo = {
+        id: this.user.id,
+        name: this.user.name ? this.user.name : this.user.id,
+        avatar: this.user?.avatar || '',
+      };
+
+      this._updateMemberWatcherReferences(userInfo);
+      this._updateUserMessageReferences(userInfo);
+
+      this.dispatchEvent({
+        type: 'user.updated',
+        me: this.user,
+      } as unknown as Event<ErmisChatGenerics>);
+    }
+
     return response;
   }
 
@@ -1309,6 +1443,10 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
 
     console.log('---channels---', channels);
 
+    this.dispatchEvent({
+      type: 'channels.queried',
+    } as unknown as Event<ErmisChatGenerics>);
+
     return channels;
   }
 
@@ -1475,8 +1613,12 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
 
     const now = new Date();
     const formattedDate = new Intl.DateTimeFormat('en-US', {
-      month: 'short', day: '2-digit', year: 'numeric',
-      hour: '2-digit', minute: '2-digit', hour12: false,
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
     }).format(now);
 
     const payload = {
@@ -1487,7 +1629,7 @@ export class ErmisChat<ErmisChatGenerics extends ExtendableGenerics = DefaultGen
 
     const quickChannel = this.channel('meeting', payload);
     await quickChannel.create();
-    
+
     return quickChannel;
   }