@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/core/client.ts

@@ -3,15 +3,20 @@ import * as SignalR from '@microsoft/signalr';
 import {
   Account,
   AddChatRequest,
-  AddMemberRequest,
+  AddChatMemberRequest,
   Chat,
   ChatListItem,
-  Message,
-  ReadRequest,
-  RemoveMemberRequest,
-  SendMessageRequest,
+  ChatMessage,
+  ReadChatMessageEvent,
+  ReadChatMessageRequest,
+  RemoveChatMemberRequest,
+  SendChatMessageRequest,
   UpdateChatNameRequest,
-} from './models';
+  SendThreadMessageRequest,
+  Thread,
+  ThreadMessage,
+  ThreadWatchListItem as ThreadListItem,
+} from './types';
 
 export interface ChatifySignalRConfig {
   hubUri?: string;
@@ -29,18 +34,55 @@ export interface ChatifyClientConfig {
   signalR: ChatifySignalRConfig;
 }
 
-const METHODS = [
-  'chatify://new-message',
+export const CHATIFY_SIGNALR_METHODS = [
+  'chatify://chat-new-message',
   'chatify://chat-created',
-  'chatify://read',
-  'chatify://member-added',
-  'chatify://member-removed',
+  'chatify://chat-message-read',
+  'chatify://chat-member-added',
+  'chatify://chat-member-removed',
   'chatify://chat-name-changed',
+
+  'chatify://thread-created',
+  'chatify://thread-message-new',
+  'chatify://thread-message-read',
+  'chatify://thread-watch-added',
+  'chatify://thread-watch-removed',
 ] as const;
 
+export type ChatifySignalRMethod = (typeof CHATIFY_SIGNALR_METHODS)[number];
+
+export type ChatifySignalRArgsByMethod = {
+  'chatify://chat-new-message': [message: ChatMessage, requestId: string];
+  'chatify://chat-created': [chat: ChatListItem, requestId: string];
+  'chatify://chat-message-read': [events: ReadChatMessageEvent[]];
+  'chatify://chat-member-added': [
+    chatId: string,
+    chatName: string,
+    account: Account,
+    message: ChatMessage,
+    withHistory: boolean,
+    read: boolean,
+  ];
+  'chatify://chat-member-removed': [
+    chatId: string,
+    accountId: string,
+    deleteHistory: boolean,
+    message: ChatMessage,
+    read: boolean,
+  ];
+  'chatify://chat-name-changed': [chatId: string, newName: string, message: ChatMessage, read: boolean];
+
+  'chatify://thread-message-new': [threadId: string, message: ThreadMessage, readForId: string | null];
+  'chatify://thread-message-read': [threadId: string, messageId: string];
+  'chatify://thread-watch-added': [thread: ThreadListItem];
+  'chatify://thread-watch-removed': [id: string];
+  'chatify://thread-created': [thread: ThreadListItem, watch: boolean];
+};
+
 export class ChatifyClient {
   private _config: ChatifyClientConfig;
   private _connection: SignalR.HubConnection = null!;
+  private _connectionPromise: Promise<SignalR.HubConnection> | null = null!;
   private _subscribers: Record<string, ((args: any[]) => void)[]> = {};
   private _reconnectSubscribers: Array<() => void> = [];
 
@@ -55,9 +97,22 @@ export class ChatifyClient {
   }
 
   public connect = async () => {
+    if (this._connection) {
+      return;
+    }
+
+    if (this._connectionPromise) {
+      return await this._connectionPromise;
+    }
+
+    this._connectionPromise = this.createAndStartConnection();
+    this._connection = await this._connectionPromise;
+  };
+
+  private createAndStartConnection = async () => {
     const headers = await this._config.signalR!.headersFactory!();
 
-    this._connection = new SignalR.HubConnectionBuilder()
+    const connection = new SignalR.HubConnectionBuilder()
       .withUrl(this._config.signalR!.hubUri!, {
         accessTokenFactory: this._config.signalR!.accessTokenFactory
           ? this._config.signalR!.accessTokenFactory
@@ -67,20 +122,32 @@ export class ChatifyClient {
       .withAutomaticReconnect()
       .build();
 
-    METHODS.forEach((x) => {
-      this._connection.on(x, (...args) => {
-        this._subscribers[x]?.forEach((s) => s(args));
+    CHATIFY_SIGNALR_METHODS.forEach((x) => {
+      connection.on(x, (...args) => {
+        this._subscribers[x]?.forEach((s) => {
+          try {
+            s(args);
+          } catch (ex) {
+            console.error(`Failed to notify subscriber`, ex);
+          }
+        });
       });
     });
 
-    this._connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
+    connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
 
-    await this._connection.start();
+    await connection.start();
+    return connection;
   };
 
-  public subscribe = <T extends any[]>(method: string, subscriber: (args: T) => void) => {
-    this._subscribers[method] = this._subscribers[method] ?? [];
-    this._subscribers[method].push(subscriber as any);
+  public subscribe = <TMethod extends ChatifySignalRMethod>(
+    method: TMethod,
+    subscriber: (args: ChatifySignalRArgsByMethod[TMethod]) => void,
+  ) => {
+    this.connect().then(() => {
+      this._subscribers[method] = this._subscribers[method] ?? [];
+      this._subscribers[method].push(subscriber as any);
+    });
     return () => this._subscribers[method].filter((x) => x !== subscriber);
   };
 
@@ -104,7 +171,7 @@ export class ChatifyClient {
   };
 
   public chat = async (id: string) => {
-    const { data } = await this.axios.get<Chat>(`chat/${id}`);
+    const { data } = await this.axios.get<Chat>(`chat/${encodeURIComponent(id)}`);
     return data;
   };
 
@@ -113,31 +180,90 @@ export class ChatifyClient {
     return data;
   };
 
-  public messages = async (args: { chatId: string; skip?: number; take?: number }) => {
+  public chatMessages = async (args: { chatId: string; skip?: number; take?: number }) => {
     const { chatId, skip = 0, take = 20 } = args;
     const pagingRule = encodeURIComponent(JSON.stringify({ skip, take }));
-    const { data } = await this.axios.get<Message[]>(`chat/${chatId}/message?pagingRule=${pagingRule}`);
+    const { data } = await this.axios.get<ChatMessage[]>(
+      `chat/${encodeURIComponent(chatId)}/message?pagingRule=${pagingRule}`,
+    );
     return data;
   };
 
-  public send = async (request: SendMessageRequest) => {
+  public sendChatMessage = async (request: SendChatMessageRequest) => {
     const { chatId, ...rest } = request;
-    await this.axios.post(`chat/${chatId}/message`, rest);
+    await this.axios.post(`chat/${encodeURIComponent(chatId)}/message`, rest);
   };
 
-  public read = async (request: ReadRequest) => {
+  public readChatMessage = async (request: ReadChatMessageRequest) => {
     await this.axios.put(`chat/message/read`, request);
   };
 
-  public removeMember = async (request: RemoveMemberRequest) => {
-    await this.axios.delete(`chat/${request.chatId}/member`, { data: request });
+  public removeChatMember = async (request: RemoveChatMemberRequest) => {
+    await this.axios.delete(`chat/${encodeURIComponent(request.chatId)}/member`, { data: request });
   };
 
   public updateChatName = async (request: UpdateChatNameRequest) => {
-    await this.axios.put(`chat/${request.id}/name`, request);
+    await this.axios.put(`chat/${encodeURIComponent(request.id)}/name`, request);
+  };
+
+  public addChatMember = async (request: AddChatMemberRequest) => {
+    await this.axios.post(`chat/${encodeURIComponent(request.chatId)}/member`, request);
+  };
+
+  public sendThreadMessage = async ({ body, threadId }: SendThreadMessageRequest) => {
+    const { data: id } = await this.axios.post<string>(`thread/${encodeURIComponent(threadId)}/message`, {
+      body,
+    });
+    return id;
+  };
+
+  public readThreadMessage = async (id: string) => {
+    await this.axios.put(`thread/message/${encodeURIComponent(id)}/read`);
+  };
+
+  public watchThreads = async () => {
+    const { data } = await this.axios.get<ThreadListItem[]>(`thread/watch`);
+    return data;
+  };
+
+  public thread = async (id: string) => {
+    const { data } = await this.axios.get<Thread>(`thread/${encodeURIComponent(id)}`);
+    return data;
+  };
+
+  public threadMessages = async ({
+    threadId,
+    skip,
+    take,
+  }: {
+    threadId: string;
+    skip: number;
+    take: number;
+  }) => {
+    const searchParams = new URLSearchParams();
+    searchParams.append('skip', skip.toString());
+    searchParams.append('take', take.toString());
+    const { data } = await this.axios.get<ThreadMessage[]>(
+      `thread/${encodeURIComponent(threadId)}/message?${searchParams.toString()}`,
+    );
+    return data;
+  };
+
+  public watchThread = async (id: string, watch: boolean) => {
+    await this.axios.put(`thread/${encodeURIComponent(id)}/watch`, { watch });
   };
 
-  public addMember = async (request: AddMemberRequest) => {
-    await this.axios.post(`chat/${request.chatId}/member`, request);
+  public connectToThread = async (id: string) => {
+    this.connect().then(() => this._connection.invoke('ConnectToThread', id));
   };
+
+  public disconnectFromThread = async (id: string) => {
+    this.connect().then(() => this._connection.invoke('DisconnectFromThread', id));
+  };
+}
+
+export function unsubscribe(...subscribers: Array<() => void>) {
+  const result = () => subscribers.forEach((x) => x());
+  result.when = (promise: Promise<any>) => promise.then(result);
+  return result;
 }

package/src/core/constants.ts

@@ -0,0 +1 @@
+export const SYSTEM_ID = 'chatify::system';

package/src/core/debounce.ts

@@ -0,0 +1,90 @@
+interface DebounceInternalValue<T> {
+  value: T;
+  enqueueTime: number;
+}
+
+export interface DebounceValue<T> extends DebounceInternalValue<T> {
+  state: 'enqueued' | 'processing';
+}
+
+export interface DebounceConfig<T> {
+  timeout: number;
+  callback: (value: T) => Promise<any>;
+  groupBy: (value: T) => string;
+  compare: (a: T, b: T) => number;
+}
+
+export class Debounce<T> {
+  private _enqueued: DebounceInternalValue<T>[] = [];
+  private _processing: DebounceInternalValue<T>[] = [];
+  private _timeoutByGroup: Record<string, NodeJS.Timeout> = {};
+  private _subscribers: ((value: Debounce<T>) => any)[] = [];
+
+  constructor(public config: DebounceConfig<T>) {}
+
+  public get units(): DebounceValue<T>[] {
+    return [
+      ...this._enqueued.map((x) => ({ ...x, state: 'enqueued' as const })),
+      ...this._processing.map((x) => ({ ...x, state: 'processing' as const })),
+    ];
+  }
+
+  public subscribe = (callback: (value: Debounce<T>) => any) => {
+    this._subscribers.push(callback);
+    return () => {
+      this._subscribers = this._subscribers.filter((x) => x !== callback);
+    };
+  };
+
+  public notify = () => {
+    this._subscribers.forEach((subscriber) => subscriber(this));
+  };
+
+  public push(value: T) {
+    const group = this.config.groupBy(value);
+    const unit = this._enqueued.find((unit) => this.config.groupBy(unit.value) === group);
+
+    if (!unit) {
+      this._enqueued.push({ value, enqueueTime: Date.now() });
+    } else if (this.config.compare(unit.value, value) >= 0) {
+      unit.value = value;
+      unit.enqueueTime = Date.now();
+    }
+
+    this._process(group);
+  }
+
+  private _process(group: string) {
+    if (!this._enqueued.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+
+    let timeout = this._timeoutByGroup[group];
+    timeout && clearTimeout(timeout);
+
+    if (this._processing.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+
+    timeout = setTimeout(() => {
+      const processing = this._enqueued.find((unit) => this.config.groupBy(unit.value) === group)!;
+      this._processing.push(processing);
+      this._enqueued.splice(this._enqueued.indexOf(processing), 1);
+      this.notify();
+
+      this.config
+        .callback(processing.value)
+        .then(() => {
+          this._processing.splice(this._processing.indexOf(processing), 1);
+          this.notify();
+          this._process(group);
+        })
+        .catch(() => {
+          this._processing.splice(this._processing.indexOf(processing), 1);
+          this.push(processing.value);
+        });
+    }, this.config.timeout);
+
+    this._timeoutByGroup[group] = timeout;
+  }
+}

package/src/core/index.ts

@@ -1,17 +1,4 @@
-export * from './models';
+export * from './constants';
+export * from './types';
+export * from './api';
 export * from './client';
-export * from './action';
-export * from './reducer';
-export * from './state';
-export * from './useGetChatQuery';
-export * from './useGetChatListQuery';
-export * from './useFetchNextMutation';
-export * from './useGetMessagesQuery';
-export * from './useSignalRMonitor';
-export * from './useGetAccountsQuery';
-export * from './useAddChatMutation';
-export * from './useReadMonitor';
-export * from './useAddMemberMutation';
-export * from './useRemoveMemberMutation';
-export * from './useSendMutation';
-export * from './useUpdateChatNameMutation';

package/src/core/types.tsx

@@ -0,0 +1,152 @@
+export interface File {
+  name: string;
+  bytes: number;
+  ref: string;
+}
+
+export interface Account {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+export interface MessageBase {
+  id: string;
+  text: string;
+  files: File[];
+  sentAt: string;
+  sentBy: Account;
+}
+
+export interface ChatMessage extends MessageBase {
+  chatId: string;
+  requestId?: string;
+}
+
+export interface Chat {
+  id: string;
+  name: string;
+  members: Account[];
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface ChatListItem {
+  id: string;
+  name: string;
+  message: ChatMessage;
+  totalUnreadCount: number;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface SendChatMessageRequest {
+  chatId: string;
+  text: string;
+  files: File[];
+  requestId: string;
+}
+
+export interface MessageBody {
+  text: string;
+  files: File[];
+}
+
+export interface AddChatRequest {
+  requestId: string;
+  name: string;
+  message?: MessageBody;
+  members: string[];
+}
+
+export interface ReadChatMessageRequest {
+  id: string;
+}
+
+export interface ReadChatMessageEvent {
+  chatId: string;
+  newLastReadMessageId: string;
+  readCount: number;
+}
+
+export interface RemoveChatMemberRequest {
+  chatId: string;
+  accountId: string;
+  deleteHistory: boolean;
+}
+
+export interface AddChatMemberRequest {
+  chatId: string;
+  accountId: string;
+  withHistory: boolean;
+}
+
+export interface UpdateChatNameRequest {
+  id: string;
+  name: string;
+}
+
+export function chatId(messageId: string) {
+  return messageId.slice(0, 36);
+}
+
+export interface ThreadWatchListItem {
+  id: string;
+  name: string;
+  createdById: string;
+  createdAt: string;
+  archive: boolean;
+  lastMessage: ThreadMessage | null;
+  lastReadMessageId: string | null;
+}
+
+export interface Thread {
+  id: string;
+  name: string;
+  createdBy: Account;
+  createdAt: string;
+  archive: boolean;
+  lastMessageId: string | null;
+  lastReadMessageId: string | null;
+  watch: boolean;
+}
+
+export interface ThreadMessage extends MessageBase {
+  threadId: string;
+}
+
+export interface SendThreadMessageRequest {
+  threadId: string;
+  body: MessageBody;
+}
+
+export type SystemMessageText =
+  | 'chatify://chat-created'
+  | 'chatify://member-added'
+  | 'chatify://member-removed'
+  | `chatify://chat-name-changed`;
+
+export function parseThreadMessageId(messageId: string) {
+  const [threadId, index] = messageId.split('::', 2);
+  return [threadId, parseInt(index, 10)] as const;
+}
+
+export function calcThreadUnreadCount(
+  thread: Pick<ThreadWatchListItem, 'lastMessage' | 'lastReadMessageId'>,
+) {
+  const lastReadMessageIndex =
+    thread.lastReadMessageId != null ? parseThreadMessageId(thread.lastReadMessageId)[1] : -1;
+
+  const lastThreadMessageIndex =
+    thread.lastMessage?.id != null ? parseThreadMessageId(thread.lastMessage?.id)[1] : -1;
+
+  return lastThreadMessageIndex - lastReadMessageIndex;
+}
+
+export function calcThreadListUnreadCount(
+  threads: Pick<ThreadWatchListItem, 'lastMessage' | 'lastReadMessageId'>[],
+) {
+  return threads.reduce((prev, thread) => {
+    return prev + calcThreadUnreadCount(thread);
+  }, 0);
+}

package/src/index.ts

@@ -1,3 +1,2 @@
 export * from './ui';
 export * from './core';
-export * from './ChatifyContext';

package/src/styles/aside.scss

@@ -1,67 +1,127 @@
+@use './variables.scss' as vars;
+
 .wxchtf-aside {
   flex: none;
-  width: 300px;
-  border-right: $border;
   display: flex;
   flex-flow: column nowrap;
+  background: #ffffff;
+  border-top-left-radius: vars.$radius;
+  border-bottom-left-radius: vars.$radius;
+  padding-top: 15px;
+  width: 320px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0;
+    bottom: 0;
+    width: calc(100% - 10px);
+    height: 20px;
+    z-index: 1;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+  }
 
   .wxchtf-chat-list.ant-menu {
     flex: 1 1 auto;
     height: 100px;
     overflow-y: auto;
+    border-inline-end: none;
+    padding-bottom: 2rem;
 
     @include scrollbar();
 
+    .ant-menu-item + .ant-menu-item {
+      margin-top: 8px;
+    }
+
     .ant-menu-item {
       padding: 0;
       height: unset;
       margin: 0;
-      width: 100%;
-      border-radius: 0;
+      margin-left: 8px;
+      width: calc(100% - 16px);
+      border-radius: 8px;
       line-height: 1.5;
-      border-top: $border;
 
-      &:first-child {
-        border-top: none;
-      }
+      &.ant-menu-item-selected {
+        background-color: #e4f7f7;
 
-      &.ant-menu-item-selected .wxchtf-chat-name {
-        font-weight: 600;
+        .wxchtf-chat-name {
+          font-weight: 600;
+          color: inherit;
+        }
       }
 
       .wxchtf-chat {
-        padding: 0.5rem 1rem;
+        padding-inline: 10px;
+        padding-block: 8.5px;
         position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
 
         &.--unread {
           .wxchtf-chat-last {
             font-weight: bold;
           }
+
+          .wxchtf-chat-name {
+            font-weight: bold;
+            max-width: 100%;
+          }
+        }
+
+        .wxchtf-chat-info {
+          min-width: 1;
         }
 
         .wxchtf-chat-name {
-          font-weight: bold;
           display: inline-block;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.88);
+        }
+
+        .wxchtf-chat-avatar {
+          background-color: var(--background-color);
+          width: 42px;
+          height: 42px;
+          line-height: 40px;
+          text-align: center;
+          color: var(--color);
+          border-radius: 50%;
+          margin-right: 11px;
+          flex: none;
+
+          .anticon {
+            font-size: 20px;
+            line-height: 42px;
+            height: 42px;
+          }
         }
 
         .wxchtf-unread-count {
-          display: inline-block;
-          padding: 0.2rem;
-          min-width: 1rem;
-          height: 1.2rem;
-          line-height: 0.7rem;
-          margin-left: 0.5rem;
+          background-color: #ff4d4f;
           border-radius: 50%;
+          width: 16px;
+          height: 16px;
+          padding: 0;
+          font-size: 10px;
+          position: absolute;
+          top: 32px;
+          right: 13px;
+          color: white;
+          line-height: 16px;
+          font-weight: bold;
           text-align: center;
-          font-size: 0.7rem;
-          background: $unreadCountBackground;
         }
 
         .wxchtf-chat-last {
           $size: 25px;
+          color: #0e0f1799;
 
           font-style: italic;
-          opacity: 0.75;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -87,6 +147,13 @@
           .wxchtf-chat-last-message {
             display: inline;
           }
+
+          .wxchtf-chat-last-sent-at {
+            position: absolute;
+            top: 7px;
+            right: 13px;
+            font-size: 0.8em;
+          }
         }
       }
     }