@webinex/chatify 2.0.0-build10 → 2.0.0-build2

package/src/core/api/baseApi.ts

@@ -1,4 +1,4 @@
-import { BaseQueryFn, EndpointBuilder, createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
+import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
 import { ChatifyClient } from '../client';
 import { Debounce } from '../debounce';
 import { chatId } from '../types';
@@ -22,17 +22,9 @@ export const __settings: ChatifyApiSettings = {
   client: null!,
 };
 
-const TAG_TYPES = ['chat', 'account', 'message', 'thread', 'thread-message'] as const;
-
-export interface BaseApiEndpointBuilder
-  extends EndpointBuilder<BaseQueryFn, (typeof TAG_TYPES)[number], 'chatify'> {}
-
-const baseApi: ReturnType<typeof createApi<BaseQueryFn, {}, 'chatify', (typeof TAG_TYPES)[number]>> =
-  createApi({
-    baseQuery: fakeBaseQuery(),
-    reducerPath: 'chatify',
-    tagTypes: TAG_TYPES,
-    endpoints: (_) => ({}),
-  });
-
-export const __baseApi = baseApi;
+export const __baseApi = createApi({
+  baseQuery: fakeBaseQuery(),
+  reducerPath: 'chatify',
+  tagTypes: ['chat', 'account', 'message', 'thread', 'thread-message'],
+  endpoints: (_) => ({}),
+});

package/src/core/api/chatApi.ts

@@ -1,17 +1,16 @@
-import { BaseApiEndpointBuilder, __baseApi, __settings } from './baseApi';
+import { __baseApi, __settings } from './baseApi';
 import { unsubscribe } from '../client';
 import { Chat } from '../types';
 
-export function chatEndpoints(builder: BaseApiEndpointBuilder) {
-  return {};
-}
-
 const chatApi = __baseApi.injectEndpoints({
   endpoints: (builder) => ({
     getChat: builder.query<Chat, { id: string }>({
       queryFn: async ({ id }) => ({ data: await __settings.client.chat(id) }),
       providesTags: ['chat', 'account'],
-      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+      onCacheEntryAdded: async (
+        { id },
+        { dispatch, cacheEntryRemoved, cacheDataLoaded, updateCachedData },
+      ) => {
         await cacheDataLoaded;
 
         unsubscribe(
@@ -85,3 +84,6 @@ const chatApi = __baseApi.injectEndpoints({
 });
 
 export const __chatApi = chatApi;
+
+export const { useGetChatQuery, useLazyGetChatQuery, useAddChatMutation, useUpdateChatNameMutation } =
+  chatApi;

package/src/core/api/chatListApi.ts

@@ -1,13 +1,14 @@
-import { BaseApiEndpointBuilder, __settings } from './baseApi';
+import { __baseApi, __settings } from './baseApi';
 import { unsubscribe } from '../client';
 import { ChatListItem } from '../types';
+import { useSelector } from 'react-redux';
 
-export function chatListEndpoints(builder: BaseApiEndpointBuilder) {
-  return {
+const chatListApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({
     getChatList: builder.query<ChatListItem[], void>({
       queryFn: async () => ({ data: await __settings.client.chats() }),
       providesTags: ['chat', 'account'],
-      onCacheEntryAdded: async (_, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
         await cacheDataLoaded;
 
         unsubscribe(
@@ -130,5 +131,19 @@ export function chatListEndpoints(builder: BaseApiEndpointBuilder) {
         ).when(cacheEntryRemoved);
       },
     }),
-  };
+  }),
+});
+
+export function useChatListItem(id: string | null) {
+  return useSelector((state: any) =>
+    id != null
+      ? chatListApi.endpoints.getChatList
+          .select()(state)
+          .data?.find((x) => x.id === id)
+      : null,
+  );
 }
+
+export const __chatListApi = chatListApi;
+
+export const { useGetChatListQuery, useLazyGetChatListQuery } = chatListApi;

package/src/core/api/chatMemberApi.ts

@@ -1,8 +1,8 @@
 import { AddChatMemberRequest, RemoveChatMemberRequest } from '../types';
-import { BaseApiEndpointBuilder, __settings } from './baseApi';
+import { __baseApi, __settings } from './baseApi';
 
-export function chatMemberEndpoints(builder: BaseApiEndpointBuilder) {
-  return {
+export const __chatMemberApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({
     removeChatMember: builder.mutation<void, RemoveChatMemberRequest>({
       queryFn: async (args) => {
         await __settings.client.removeChatMember(args);
@@ -16,5 +16,7 @@ export function chatMemberEndpoints(builder: BaseApiEndpointBuilder) {
         return { data: null! };
       },
     }),
-  };
-}
+  }),
+});
+
+export const { useAddChatMemberMutation, useRemoveChatMemberMutation } = __chatMemberApi;

package/src/core/api/chatMessageApi.ts

@@ -1,12 +1,156 @@
 import { unsubscribe } from '../client';
 import { Debounce, DebounceValue } from '../debounce';
 import { ChatMessage, chatId } from '../types';
-import { BaseApiEndpointBuilder, DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
+import { DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
 
-export function chatMessageEndpoints(builder: BaseApiEndpointBuilder) {
-  return {};
+export interface ChatMessageListResult {
+  messages: ChatMessage[];
+  hasMore: boolean;
 }
 
+const CHAT_MESSAGE_READ_QUEUE = new Debounce<string>({
+  callback: (id) => __settings.client.readChatMessage({ id }),
+  compare: (a, b) => -a.localeCompare(b),
+  groupBy: (id) => chatId(id),
+  timeout: 500,
+});
+
 export const __chatMessageApi = __baseApi.injectEndpoints({
-  endpoints: (builder) => ({}),
+  endpoints: (builder) => ({
+    getChatMessageList: builder.query<ChatMessageListResult, { chatId: string }>({
+      queryFn: async ({ chatId }) => {
+        const messages = await __settings.client.chatMessages({
+          chatId,
+          skip: 0,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1,
+        });
+        return {
+          data: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1,
+          },
+        };
+      },
+      providesTags: ['message', 'chat', 'account'],
+      onCacheEntryAdded: async ({ chatId }, { dispatch, cacheEntryRemoved, cacheDataLoaded }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe('chatify://chat-new-message', ([message]) => {
+            message.chatId === chatId &&
+              dispatch(
+                __chatMessageApi.util.updateQueryData('getChatMessageList', { chatId }, (draft) => {
+                  draft.messages.unshift(message);
+                }),
+              );
+          }),
+
+          __settings.client.subscribe('chatify://chat-member-added', ([eventChatId, , , message]) => {
+            eventChatId === chatId &&
+              dispatch(
+                __chatMessageApi.util.updateQueryData('getChatMessageList', { chatId }, (draft) => {
+                  draft.messages.unshift(message);
+                }),
+              );
+          }),
+
+          __settings.client.subscribe('chatify://chat-member-removed', ([eventChatId, , , message]) => {
+            eventChatId === chatId &&
+              dispatch(
+                __chatMessageApi.util.updateQueryData('getChatMessageList', { chatId }, (draft) => {
+                  draft.messages.unshift(message);
+                }),
+              );
+          }),
+
+          __settings.client.subscribe('chatify://chat-name-changed', ([eventChatId, , message]) => {
+            eventChatId === chatId &&
+              dispatch(
+                __chatMessageApi.util.updateQueryData('getChatMessageList', { chatId }, (draft) => {
+                  draft.messages.unshift(message);
+                }),
+              );
+          }),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+
+    fetchNextChatMessageList: builder.mutation<void, { chatId: string }>({
+      queryFn: async ({ chatId }, { getState }) => {
+        const current = __chatMessageApi.endpoints.getChatMessageList.select({ chatId })(getState() as any);
+        const messages = await __settings.client.chatMessages({
+          chatId,
+          skip: current.data!.messages.length,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1,
+        });
+        return {
+          data: null!,
+          meta: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1,
+          },
+        };
+      },
+      onQueryStarted: async ({ chatId }, { dispatch, queryFulfilled }) => {
+        const result = await queryFulfilled;
+        const meta: ChatMessageListResult = result.meta! as any;
+
+        dispatch(
+          __chatMessageApi.util.updateQueryData('getChatMessageList', { chatId }, (draft) => {
+            draft.hasMore = meta.hasMore;
+            draft.messages.push(...meta!.messages);
+          }),
+        );
+      },
+    }),
+
+    sendChatMessage: builder.mutation<void, { chatId: string; text: string }>({
+      queryFn: async ({ chatId, text }) => {
+        const requestId = new Date().getTime().toString();
+
+        await __settings.client.sendChatMessage({
+          chatId,
+          text,
+          files: [],
+          requestId,
+        });
+
+        return { data: null!, meta: { requestId } };
+      },
+    }),
+
+    readChatMessage: builder.mutation<void, { id: string }>({
+      queryFn: async () => {
+        return { data: null! };
+      },
+      onQueryStarted: async ({ id }, { dispatch }) => {
+        CHAT_MESSAGE_READ_QUEUE.push(id);
+        dispatch(
+          __chatMessageApi.endpoints.getChatMessageReadQueue.initiate(undefined, { forceRefetch: true }),
+        );
+      },
+    }),
+
+    getChatMessageReadQueue: builder.query<DebounceValue<string>[], void>({
+      queryFn: async () => ({ data: CHAT_MESSAGE_READ_QUEUE.units }),
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved }) => {
+        unsubscribe(
+          CHAT_MESSAGE_READ_QUEUE.subscribe((value) => {
+            dispatch(
+              __chatMessageApi.util.updateQueryData('getChatMessageReadQueue', undefined, () => value.units),
+            );
+          }),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+  }),
 });
+
+export const {
+  useFetchNextChatMessageListMutation,
+  useGetChatMessageListQuery,
+  useReadChatMessageMutation,
+  useSendChatMessageMutation,
+  useGetChatMessageReadQueueQuery,
+  useLazyGetChatMessageListQuery,
+} = __chatMessageApi;

package/src/core/api/index.ts

@@ -1 +1,9 @@
+export * from './baseApi';
+export * from './accountApi';
+export * from './chatApi';
+export * from './chatListApi';
+export * from './chatMemberApi';
+export * from './chatMessageApi';
+export * from './threadApi';
+export * from './threadMessageApi';
 export * from './api';

package/src/core/api/threadApi.ts

@@ -4,5 +4,129 @@ import { unsubscribe } from '../client';
 import { useMemo } from 'react';
 
 export const __threadApi = __baseApi.injectEndpoints({
-  endpoints: (builder) => ({}),
+  endpoints: (builder) => ({
+    getWatchThreadList: builder.query<ThreadWatchListItem[], void>({
+      queryFn: async () => {
+        const threads = await __settings.client.watchThreads();
+        return { data: threads };
+      },
+      providesTags: ['account', 'thread'],
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe(
+            'chatify://thread-created',
+            ([thread, watch]) =>
+              watch &&
+              updateCachedData((threads) => {
+                threads.push(thread);
+              }),
+          ),
+          __settings.client.subscribe('chatify://thread-message-new', ([threadId, message, readForId]) =>
+            updateCachedData((threads) => {
+              const thread = threads.find((x) => x.id === threadId);
+              if (!thread) return;
+
+              thread.lastMessage = message;
+
+              if (readForId === __settings.me()) {
+                thread.lastReadMessageId = message.id;
+              }
+            }),
+          ),
+          __settings.client.subscribe('chatify://thread-message-read', ([threadId, messageId]) =>
+            updateCachedData((threads) => {
+              const thread = threads.find((x) => x.id === threadId);
+              if (!thread) return;
+
+              thread.lastReadMessageId = messageId;
+            }),
+          ),
+          __settings.client.subscribe('chatify://thread-watch-added', ([thread]) =>
+            updateCachedData((threads) => {
+              threads.push(thread);
+            }),
+          ),
+          __settings.client.subscribe('chatify://thread-watch-removed', ([id]) =>
+            updateCachedData((threads) => {
+              const index = threads.findIndex((x) => x.id === id);
+              if (index !== -1) threads.splice(index, 1);
+            }),
+          ),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+
+    getThread: builder.query<Thread, { id: string }>({
+      queryFn: async ({ id }) => {
+        const threads = await __settings.client.thread(id);
+        return { data: threads };
+      },
+      providesTags: ['account', 'thread'],
+      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe(
+            'chatify://thread-message-read',
+            ([threadId, messageId]) =>
+              id === threadId &&
+              updateCachedData((t) => {
+                t.lastReadMessageId = messageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://thread-message-new',
+            ([threadId, message, readForId]) =>
+              id === threadId &&
+              updateCachedData((thread) => {
+                thread.lastMessageId = message.id;
+                thread.lastReadMessageId =
+                  readForId === __settings.me() ? message.id : thread.lastReadMessageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://thread-watch-added',
+            ([threadListItem]) =>
+              id === threadListItem.id &&
+              updateCachedData((thread) => {
+                thread.watch = true;
+                thread.lastMessageId = threadListItem.lastMessage?.id ?? null;
+                thread.lastReadMessageId = threadListItem.lastReadMessageId ?? null;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://thread-watch-removed',
+            ([threadId]) =>
+              id === threadId &&
+              updateCachedData((thread) => {
+                thread.watch = false;
+              }),
+          ),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+
+    watchThread: builder.mutation<void, { id: string; watch: boolean }>({
+      queryFn: async ({ id, watch }) => {
+        await __settings.client.watchThread(id, watch);
+        return { data: null! };
+      },
+    }),
+  }),
 });
+
+export function useUnreadThreadMessageCount() {
+  const { data: threads, ...state } = useGetWatchThreadListQuery();
+  const count = useMemo(() => (threads != null ? calcThreadListUnreadCount(threads) : null), [threads]);
+  return [count, state] as const;
+}
+
+export const {
+  useGetWatchThreadListQuery,
+  useGetThreadQuery,
+  useLazyGetThreadQuery,
+  useLazyGetWatchThreadListQuery,
+  useWatchThreadMutation,
+} = __threadApi;

package/src/core/api/threadMessageApi.ts

@@ -16,5 +16,112 @@ const THREAD_MESSAGE_READ_QUEUE = new Debounce<string>({
 });
 
 export const __threadMessageApi = __baseApi.injectEndpoints({
-  endpoints: (builder) => ({}),
+  endpoints: (builder) => ({
+    getThreadMessageList: builder.query<ThreadMessageList, { threadId: string }>({
+      queryFn: async (args) => {
+        const requestArgs = {
+          skip: 0,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1,
+          ...args,
+        };
+        const messages = await __settings.client.threadMessages(requestArgs);
+        return {
+          data: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1,
+          },
+        };
+      },
+      providesTags: ['account', 'thread', 'thread-message'],
+      onCacheEntryAdded: async ({ threadId }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe('chatify://thread-message-new', ([_threadId, message]) => {
+            threadId === _threadId &&
+              updateCachedData((messageList) => {
+                !messageList.messages.some((x) => x.id === message.id) &&
+                  messageList.messages.unshift(message);
+              });
+          }),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+
+    fetchNextThreadMessageList: builder.mutation<void, { threadId: string }>({
+      queryFn: async ({ threadId }, { getState }) => {
+        const current = __threadMessageApi.endpoints.getThreadMessageList.select({ threadId })(
+          getState() as any,
+        );
+        const messages = await __settings.client.threadMessages({
+          threadId,
+          skip: current.data!.messages.length,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1,
+        });
+        return {
+          data: null!,
+          meta: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1,
+          },
+        };
+      },
+      onQueryStarted: async ({ threadId }, { dispatch, queryFulfilled }) => {
+        const result = await queryFulfilled;
+        const meta: ThreadMessageList = result.meta! as any;
+
+        dispatch(
+          __threadMessageApi.util.updateQueryData('getThreadMessageList', { threadId }, (draft) => {
+            draft.hasMore = meta.hasMore;
+            draft.messages.push(...meta!.messages);
+          }),
+        );
+      },
+    }),
+
+    sendThreadMessage: builder.mutation<string, SendThreadMessageRequest>({
+      queryFn: async (args) => {
+        const id = await __settings.client.sendThreadMessage(args);
+        return { data: id };
+      },
+    }),
+
+    readThreadMessage: builder.mutation<void, { id: string }>({
+      queryFn: async () => {
+        return { data: null! };
+      },
+      onQueryStarted: async ({ id }, { dispatch }) => {
+        THREAD_MESSAGE_READ_QUEUE.push(id);
+        dispatch(
+          __threadMessageApi.endpoints.getThreadMessageReadQueue.initiate(undefined, { forceRefetch: true }),
+        );
+      },
+    }),
+
+    getThreadMessageReadQueue: builder.query<DebounceValue<string>[], void>({
+      queryFn: async () => ({ data: THREAD_MESSAGE_READ_QUEUE.units }),
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved }) => {
+        unsubscribe(
+          THREAD_MESSAGE_READ_QUEUE.subscribe((value) => {
+            dispatch(
+              __threadMessageApi.util.updateQueryData(
+                'getThreadMessageReadQueue',
+                undefined,
+                () => value.units,
+              ),
+            );
+          }),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+  }),
 });
+
+export const {
+  useFetchNextThreadMessageListMutation,
+  useGetThreadMessageListQuery,
+  useLazyGetThreadMessageListQuery,
+  useReadThreadMessageMutation,
+  useSendThreadMessageMutation,
+  useGetThreadMessageReadQueueQuery,
+} = __threadMessageApi;

package/src/ui/Chat/ChatEditableHeaderName.tsx

@@ -1,5 +1,5 @@
 import { Input, Tooltip } from 'antd';
-import { chatifyApi } from '../../core';
+import { useUpdateChatNameMutation } from '../../core';
 import { customize } from '../customize';
 import { useEffect, useState } from 'react';
 import isHotkey from 'is-hotkey';
@@ -9,7 +9,7 @@ const isEscape = isHotkey('escape');
 const isEnter = isHotkey('enter');
 
 function useUpdateChatName(id: string, value: string) {
-  const [updateChatName] = chatifyApi.useUpdateChatNameMutation();
+  const [updateChatName] = useUpdateChatNameMutation();
   return () => updateChatName({ id, name: value });
 }
 

package/src/ui/Chat/ChatPanel.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
 import { CustomizeContext } from '../customize';
 import { ChatView, ChatViewCustomizeValue } from './ChatView';
-import { chatifyApi } from '../../core';
+import { useGetChatQuery } from '../../core';
 
 export interface ChatPanelCustomizeValue extends ChatViewCustomizeValue {}
 
@@ -16,7 +16,7 @@ export interface ChatPanelProps {
 
 export function ChatPanel(props: ChatPanelProps) {
   const { id, className = '', customize, localizer = defaultLocalizer, style } = props;
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  const { data: chat } = useGetChatQuery({ id });
 
   return (
     <div className={`wxchtf-chatify wxchtf-chat-panel ${className}`} style={style}>

package/src/ui/Chat/ChatView.tsx

@@ -1,5 +1,13 @@
 import { CustomizeContext, customize, useCustomizeContext } from '../customize';
-import { MessageBody, chatId, chatifyApi } from '../../core';
+import {
+  MessageBody,
+  chatId,
+  useFetchNextChatMessageListMutation,
+  useGetChatMessageListQuery,
+  useGetChatMessageReadQueueQuery,
+  useReadChatMessageMutation,
+  useSendChatMessageMutation,
+} from '../../core';
 import {
   Conversation,
   ConversationCustomizeValue,
@@ -33,19 +41,19 @@ function useConversation(props: ChatProps) {
   const { value: chat } = props;
   const { id, name, active, lastReadMessageId } = chat;
 
-  const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
+  const { data: messageList } = useGetChatMessageListQuery({ chatId: id });
   const { messages, hasMore } = messageList ?? {};
 
-  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextChatMessageListMutation();
+  const [fetchNext, { isLoading: isFetchNextLoading }] = useFetchNextChatMessageListMutation();
   const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
 
-  const [read] = chatifyApi.useReadChatMessageMutation();
+  const [read] = useReadChatMessageMutation();
   const onRead = useCallback((id: string) => read({ id }), [read]);
 
-  const [send] = chatifyApi.useSendChatMessageMutation();
+  const [send] = useSendChatMessageMutation();
   const onSend = useCallback((message: MessageBody) => send({ ...message, chatId: id }).unwrap(), [id, send]);
 
-  const { data: readQueue } = chatifyApi.useGetChatMessageReadQueueQuery();
+  const { data: readQueue } = useGetChatMessageReadQueueQuery();
 
   const conversation = useMemo(() => {
     if (!id) {

package/src/ui/Chat/Members/ChatMembersPanel.tsx

@@ -1,5 +1,10 @@
 import { Button, List, Space, Tooltip } from 'antd';
-import { chatifyApi } from '../../../core';
+import {
+  useAddChatMemberMutation,
+  useGetAccountListQuery,
+  useGetChatQuery,
+  useRemoveChatMemberMutation,
+} from '../../../core';
 import { customize } from '../../customize';
 import { useCallback, useMemo } from 'react';
 import { Icon } from '../../common/Icon';
@@ -12,7 +17,7 @@ interface ChatMemberListItemProps {
 }
 
 function useAdd(chatId: string, accountId: string, withHistory: boolean) {
-  const [add, state] = chatifyApi.useAddChatMemberMutation();
+  const [add, state] = useAddChatMemberMutation();
   const onAdd = useCallback(
     () => add({ chatId, accountId, withHistory }),
     [add, chatId, accountId, withHistory],
@@ -21,7 +26,7 @@ function useAdd(chatId: string, accountId: string, withHistory: boolean) {
 }
 
 function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
-  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
+  const [remove, state] = useRemoveChatMemberMutation();
   const onRemove = useCallback(
     () => remove({ chatId, accountId, deleteHistory }),
     [remove, chatId, accountId, deleteHistory],
@@ -31,8 +36,8 @@ function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
 
 const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
   const { chatId } = props;
-  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const { data: chat } = useGetChatQuery({ id: chatId });
+  const { data: accounts } = useGetAccountListQuery();
   const account = accounts!.find((x) => x.id === props.id)!;
   const isMember = chat!.members.some((x) => x.id === account.id);
   const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
@@ -81,8 +86,8 @@ const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberLis
 
 export const ChatMembersPanel = customize('ChatMembersPanel', () => {
   const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const { data: chat } = useGetChatQuery({ id });
+  const { data: accounts } = useGetAccountListQuery();
   const ordered = useMemo(
     () =>
       accounts

package/src/ui/Chat/Members/ChatMembersPreview.tsx

@@ -1,4 +1,4 @@
-import { chatifyApi } from '../../../core';
+import { useGetChatQuery } from '../../../core';
 import { Tooltip } from 'antd';
 import { customize } from '../../customize';
 import { Avatar as AntdAvatar } from 'antd';
@@ -7,7 +7,7 @@ import { useChatContext } from '../ChatContext';
 
 export const ChatMembersPreview = customize('ChatMembersPreview', () => {
   const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  const { data: chat } = useGetChatQuery({ id });
 
   if (!chat?.members) {
     return null;