@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/ui/Chat/ChatView.tsx

@@ -0,0 +1,123 @@
+import { CustomizeContext, customize, useCustomizeContext } from '../customize';
+import {
+  MessageBody,
+  chatId,
+  useFetchNextChatMessageListMutation,
+  useGetChatMessageListQuery,
+  useGetChatMessageReadQueueQuery,
+  useReadChatMessageMutation,
+  useSendChatMessageMutation,
+} from '../../core';
+import {
+  Conversation,
+  ConversationCustomizeValue,
+  ConversationProps,
+  ConversationValue,
+} from '../Conversation';
+import { useCallback, useMemo } from 'react';
+import { ChatEditableHeaderName } from './ChatEditableHeaderName';
+import { ChatHeaderActions } from './ChatHeaderActions';
+import { ChatMembersCustomizeValue, ChatMembersPanel } from './Members';
+import { ChatContext, useChatContext } from './ChatContext';
+
+export interface ChatProps {
+  value: ChatValue;
+}
+
+export interface ChatValue extends ConversationValue {}
+
+export interface ChatViewCustomizeValue extends ConversationCustomizeValue, ChatMembersCustomizeValue {
+  ChatEditableHeaderName?: typeof ChatEditableHeaderName.Component | null;
+  ChatHeaderActions?: typeof ChatHeaderActions.Component | null;
+  ChatView?: typeof ChatView.Component | null;
+}
+
+export const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE: ConversationCustomizeValue = {
+  ConversationName: () => <ChatEditableHeaderName />,
+  ConversationActions: () => <ChatHeaderActions />,
+};
+
+function useConversation(props: ChatProps) {
+  const { value: chat } = props;
+  const { id, name, active, lastReadMessageId } = chat;
+
+  const { data: messageList } = useGetChatMessageListQuery({ chatId: id });
+  const { messages, hasMore } = messageList ?? {};
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = useFetchNextChatMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
+
+  const [read] = useReadChatMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [send] = useSendChatMessageMutation();
+  const onSend = useCallback((message: MessageBody) => send({ ...message, chatId: id }).unwrap(), [id, send]);
+
+  const { data: readQueue } = useGetChatMessageReadQueueQuery();
+
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+
+    const result: ConversationProps = {
+      value: { id: id!, name: name!, active: active!, lastReadMessageId: lastReadMessageId! },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      isReading: (id: string) => readQueue!.some((x) => chatId(x.value) === chatId(id) && id <= x.value),
+    };
+
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    active,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+  ]);
+
+  return conversation;
+}
+
+function Content(props: ChatProps) {
+  const conversation = useConversation(props);
+  const { showMembers } = useChatContext();
+
+  if (!conversation) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat">
+      <Conversation {...conversation} />
+      {showMembers && <ChatMembersPanel />}
+    </div>
+  );
+}
+
+export const ChatView = customize('ChatView', (props: ChatProps) => {
+  const { value } = props;
+  const customized = useCustomizeContext();
+  const customize = useMemo(
+    () => ({ ...(customized ?? {}), ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
+    [customized],
+  );
+
+  return (
+    <CustomizeContext.Provider value={customize}>
+      <ChatContext id={value.id}>
+        <Content value={value} />
+      </ChatContext>
+    </CustomizeContext.Provider>
+  );
+});

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

@@ -0,0 +1,9 @@
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersButton = customize('ChatMembersButton', () => {
+  const { showMembers, onShowMembers } = useChatContext();
+  return <Button onClick={() => onShowMembers(!showMembers)} type="link" icon={<Icon type="members" />} />;
+});

package/src/ui/{ChatPanel → Chat/Members}/ChatMembersPanel.tsx

@@ -1,18 +1,15 @@
 import { Button, List, Space, Tooltip } from 'antd';
 import {
-  useAddMemberMutation,
-  useGetAccountsQuery,
+  useAddChatMemberMutation,
+  useGetAccountListQuery,
   useGetChatQuery,
-  useRemoveMemberMutation,
-} from '../../core';
-import { customize } from '../customize';
+  useRemoveChatMemberMutation,
+} from '../../../core';
+import { customize } from '../../customize';
 import { useCallback, useMemo } from 'react';
-import { Icon } from '../Icon';
-import { Avatar } from '../Avatar';
-
-export interface ChatMembersPanelProps {
-  id: string;
-}
+import { Icon } from '../../common/Icon';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
 
 interface ChatMemberListItemProps {
   id: string;
@@ -20,7 +17,7 @@ interface ChatMemberListItemProps {
 }
 
 function useAdd(chatId: string, accountId: string, withHistory: boolean) {
-  const [add, state] = useAddMemberMutation();
+  const [add, state] = useAddChatMemberMutation();
   const onAdd = useCallback(
     () => add({ chatId, accountId, withHistory }),
     [add, chatId, accountId, withHistory],
@@ -29,7 +26,7 @@ function useAdd(chatId: string, accountId: string, withHistory: boolean) {
 }
 
 function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
-  const [remove, state] = useRemoveMemberMutation();
+  const [remove, state] = useRemoveChatMemberMutation();
   const onRemove = useCallback(
     () => remove({ chatId, accountId, deleteHistory }),
     [remove, chatId, accountId, deleteHistory],
@@ -39,8 +36,8 @@ function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
 
 const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
   const { chatId } = props;
-  const { data: chat } = useGetChatQuery({ chatId });
-  const { data: accounts } = useGetAccountsQuery();
+  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);
@@ -55,22 +52,26 @@ const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberLis
         isMember
           ? [
               <Tooltip key="remove" title="Remove (keep history)">
-                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove" />} />
+                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove-member" />} />
               </Tooltip>,
               <Tooltip key="remove_delete_history" title="Remove (delete history)">
                 <Button
                   onClick={onRemoveDeleteHistory}
                   type="link"
-                  icon={<Icon type="remove_delete_history" />}
+                  icon={<Icon type="remove-member-delete-history" />}
                 />
               </Tooltip>,
             ]
           : [
               <Tooltip key="add_no_history" title="Add (no history)">
-                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add" />} />
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add-member" />} />
               </Tooltip>,
               <Tooltip key="add" title="Add (share history)">
-                <Button onClick={onAddWithHistory} type="link" icon={<Icon type="add_with_history" />} />
+                <Button
+                  onClick={onAddWithHistory}
+                  type="link"
+                  icon={<Icon type="add-member-with-history" />}
+                />
               </Tooltip>,
             ]
       }
@@ -83,11 +84,10 @@ const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberLis
   );
 });
 
-export const ChatMembersPanel = customize('ChatMembersPanel', (props: ChatMembersPanelProps) => {
-  const { id } = props;
-
-  const { data: chat } = useGetChatQuery({ chatId: id });
-  const { data: accounts } = useGetAccountsQuery();
+export const ChatMembersPanel = customize('ChatMembersPanel', () => {
+  const { id } = useChatContext();
+  const { data: chat } = useGetChatQuery({ id });
+  const { data: accounts } = useGetAccountListQuery();
   const ordered = useMemo(
     () =>
       accounts

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

@@ -0,0 +1,25 @@
+import { useGetChatQuery } from '../../../core';
+import { Tooltip } from 'antd';
+import { customize } from '../../customize';
+import { Avatar as AntdAvatar } from 'antd';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersPreview = customize('ChatMembersPreview', () => {
+  const { id } = useChatContext();
+  const { data: chat } = useGetChatQuery({ id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <AntdAvatar.Group maxCount={5}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar account={x} />
+        </Tooltip>
+      ))}
+    </AntdAvatar.Group>
+  );
+});

package/src/ui/Chat/Members/index.ts

@@ -0,0 +1,13 @@
+import { ChatMembersButton } from './ChatMembersButton';
+import { ChatMembersPanel } from './ChatMembersPanel';
+import { ChatMembersPreview } from './ChatMembersPreview';
+
+export * from './ChatMembersButton';
+export * from './ChatMembersPanel';
+export * from './ChatMembersPreview';
+
+export interface ChatMembersCustomizeValue {
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
+  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
+}

package/src/ui/Chat/index.ts

@@ -0,0 +1,6 @@
+export * from './Members';
+export * from './ChatView';
+export * from './ChatContext';
+export * from './ChatEditableHeaderName';
+export * from './ChatHeaderActions';
+export * from './ChatPanel';

package/src/ui/ChatGroup/ChatGroupContext.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+export interface ChatGroupContext {
+  view: 'chat' | 'new-chat' | null;
+  chatId: string | null;
+  showMembers: boolean;
+
+  none(): void;
+  openChat(chatId: string): void;
+  toggleNewChat(): void;
+  toggleMembers(): void;
+}
+
+const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
+
+export function useChatGroupContext() {
+  return useContext(ChatGroupReactContext);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function ChatGroupContext(props: PropsWithChildren<{}>) {
+  const { children } = props;
+  const [state, setState] = useState<Pick<ChatGroupContext, 'view' | 'chatId' | 'showMembers'>>({
+    chatId: null,
+    view: null,
+    showMembers: false,
+  });
+
+  const value = useMemo<ChatGroupContext>(
+    () => ({
+      ...state,
+      openChat: (chatId: string) => setState((prev) => ({ ...prev, view: 'chat', chatId })),
+      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
+      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
+      toggleNewChat: () =>
+        setState((prev) => {
+          if (prev.view === 'new-chat' && !prev.chatId) {
+            return { ...prev, view: null };
+          } else if (prev.view === 'new-chat' && prev.chatId) {
+            return { ...prev, view: 'chat' };
+          } else {
+            return { ...prev, view: 'new-chat' };
+          }
+        }),
+    }),
+    [state],
+  );
+
+  return <ChatGroupReactContext.Provider value={value}>{children}</ChatGroupReactContext.Provider>;
+}

package/src/ui/ChatGroup/ChatGroupPanel.tsx

@@ -0,0 +1,73 @@
+import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CreateChatPanelCustomizeValue } from './Create';
+import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
+import { ChatListCustomizeValue } from './List';
+import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
+import { useGetChatListQuery } from '../../core';
+import { CustomizeContext } from '../customize';
+import { ChatViewCustomizeValue } from '../Chat';
+
+export interface ChatGroupCustomizeValue
+  extends ChatViewCustomizeValue,
+    CreateChatPanelCustomizeValue,
+    ChatListCustomizeValue,
+    ChatGroupLayoutCustomizeValue {}
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatGroupCustomizeValue;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  const { data: chats } = useGetChatListQuery();
+  const { openChat, none, chatId } = useChatGroupContext();
+  const openFirstChatRef = useRef(false);
+
+  useEffect(() => {
+    if (chats && !chats.some((x) => x.id === chatId)) {
+      chats.length ? openChat(chats[0].id) : none();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats, chatId]);
+
+  useEffect(() => {
+    if (chats && !openFirstChatRef.current) {
+      openFirstChatRef.current = true;
+      chats.length && openChat(chats[0].id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats]);
+
+  return (
+    <div className={className + ' wxchtf-chatify wxchtf-chat-group'} style={style}>
+      <ChatGroupHeader />
+      <ChatGroupBody />
+      <ChatGroupFooter />
+    </div>
+  );
+}
+
+const DEFAULT_CUSTOMIZE: ChatGroupCustomizeValue = {
+  ChatGroupHeader: null,
+  ChatGroupFooter: null,
+};
+
+export const ChatGroupPanel: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
+  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <CustomizeContext.Provider value={customizeValue as any}>
+        <ChatGroupContext>
+          <Content {...props} />
+        </ChatGroupContext>
+      </CustomizeContext.Provider>
+    </LocalizerContext.Provider>
+  );
+};

package/src/ui/ChatGroup/Create/CreateChatButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+export const CreateChatButton = customize('CreateChatButton', () => {
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <span className="wxchtf-add-btn-wrapper">
+      <Button className="wxchtf-add-btn" onClick={toggleNewChat} icon="+">
+        Add chat
+      </Button>
+    </span>
+  );
+});

package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatForm.tsx

@@ -1,8 +1,8 @@
 import { Button, Form } from 'antd';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { CreateChatNameInput } from './CreateChatNameInput';
 import { CreateChatMemberInput } from './CreateChatMemberInput';
-import { useLocalizer } from '../localizer';
+import { useLocalizer } from '../../localizer';
 
 export interface CreateChatFormValue {
   name: string;

package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatMemberInput.tsx

@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
-import { useGetAccountsQuery } from '../../core';
-import { customize } from '../customize';
+import { chatifyApi, useGetAccountListQuery } from '../../../core';
+import { customize } from '../../customize';
 import { Checkbox, Form, List } from 'antd';
-import { useLocalizer } from '../localizer';
-import { useMe } from '../../ChatifyContext';
-import { Avatar } from '../Avatar';
+import { useLocalizer } from '../../localizer';
+import { Avatar } from '../../common/Avatar';
 
 export interface CreateChatMemberInputProps {
   name: string;
@@ -17,8 +16,8 @@ interface CheckboxListProps {
 
 function CheckboxList(props: CheckboxListProps) {
   const { value, onChange } = props;
-  const { data: accounts, isFetching } = useGetAccountsQuery();
-  const me = useMe();
+  const { data: accounts, isFetching } = useGetAccountListQuery();
+  const me = chatifyApi.settings.me();
   const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
 
   return (

package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatNameInput.tsx

@@ -1,6 +1,6 @@
 import { Form, Input } from 'antd';
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
 
 export interface CreateChatNameInputProps {
   name: string;

package/src/ui/ChatGroup/Create/CreateChatPanel.tsx

@@ -0,0 +1,45 @@
+import { useAddChatMutation } from '../../../core';
+import { useCallback } from 'react';
+import { useLocalizer } from '../../localizer';
+import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
+import { customize } from '../../customize';
+import { Button } from 'antd';
+import { Icon } from '../../common/Icon';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+function useSubmit() {
+  const [add, { isLoading }] = useAddChatMutation();
+  const { openChat } = useChatGroupContext();
+
+  const onSubmit = useCallback(
+    (value: CreateChatFormValue) =>
+      add({
+        name: value.name,
+        members: value.members,
+      })
+        .unwrap()
+        .then((id) => openChat(id)),
+    [add, openChat],
+  );
+
+  return [onSubmit, isLoading] as const;
+}
+
+export const CreateChatPanel = customize('CreateChatPanel', () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <div className="wxchtf-create-chat-panel">
+      <Button
+        onClick={() => toggleNewChat()}
+        className="wxchtf-create-chat-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
+      <h3>{localizer.addChat.title()}</h3>
+      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Create/index.ts

@@ -0,0 +1,19 @@
+import { CreateChatForm } from './CreateChatForm';
+import { CreateChatMemberInput } from './CreateChatMemberInput';
+import { CreateChatNameInput } from './CreateChatNameInput';
+import { CreateChatPanel } from './CreateChatPanel';
+import { CreateChatButton } from './CreateChatButton';
+
+export * from './CreateChatForm';
+export * from './CreateChatMemberInput';
+export * from './CreateChatNameInput';
+export * from './CreateChatPanel';
+export * from './CreateChatButton';
+
+export interface CreateChatPanelCustomizeValue {
+  CreateChatForm?: typeof CreateChatForm.Component | null;
+  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
+  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
+  CreateChatPanel?: typeof CreateChatPanel.Component | null;
+  CreateChatButton?: typeof CreateChatButton.Component | null;
+}

package/src/ui/ChatGroup/Layout/ChatGroupAside.tsx

@@ -0,0 +1,12 @@
+import { customize } from '../../customize';
+import { ChatList } from '../List';
+import { CreateChatButton } from '../Create/CreateChatButton';
+
+export const ChatGroupAside = customize('ChatGroupAside', () => {
+  return (
+    <div className="wxchtf-aside">
+      <CreateChatButton />
+      <ChatList />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/ChatGroupBody.tsx

@@ -0,0 +1,10 @@
+import { customize } from '../../customize';
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupMain } from './ChatGroupMain';
+
+export const ChatGroupBody = customize('ChatGroupBody', () => (
+  <div className="wxchtf-body">
+    <ChatGroupAside />
+    <ChatGroupMain />
+  </div>
+));

package/src/ui/ChatGroup/Layout/ChatGroupFooter.tsx

@@ -0,0 +1,3 @@
+import { customize } from '../../customize';
+
+export const ChatGroupFooter = customize('ChatGroupFooter', () => <div className="wxchtf-footer"></div>);

package/src/ui/ChatGroup/Layout/ChatGroupHeader.tsx

@@ -0,0 +1,5 @@
+import { customize } from '../../customize';
+
+export const ChatGroupHeader = customize('ChatGroupHeader', () => {
+  return <div className="wxchtf-header"></div>;
+});

package/src/ui/ChatGroup/Layout/ChatGroupMain.tsx

@@ -0,0 +1,17 @@
+import { customize } from '../../customize';
+import { CreateChatPanel } from '../Create';
+import { ChatView } from '../../Chat';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { useChatListItem } from '../../../core';
+
+export const ChatGroupMain = customize('ChatGroupMain', () => {
+  const { chatId, view } = useChatGroupContext();
+  const chat = useChatListItem(chatId);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
+      {view === 'new-chat' && <CreateChatPanel />}
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/index.ts

@@ -0,0 +1,19 @@
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupHeader } from './ChatGroupHeader';
+import { ChatGroupFooter } from './ChatGroupFooter';
+import { ChatGroupMain } from './ChatGroupMain';
+import { ChatGroupBody } from './ChatGroupBody';
+
+export * from './ChatGroupAside';
+export * from './ChatGroupHeader';
+export * from './ChatGroupFooter';
+export * from './ChatGroupMain';
+export * from './ChatGroupBody';
+
+export interface ChatGroupLayoutCustomizeValue {
+  ChatGroupAside?: typeof ChatGroupAside.Component | null;
+  ChatGroupHeader?: typeof ChatGroupHeader.Component | null;
+  ChatGroupFooter?: typeof ChatGroupFooter.Component | null;
+  ChatGroupMain?: typeof ChatGroupMain.Component | null;
+  ChatGroupBody?: typeof ChatGroupBody.Component | null;
+}

package/src/ui/{ChatList → ChatGroup/List}/ChatList.tsx

@@ -1,17 +1,17 @@
 import { Menu, MenuProps } from 'antd';
 import { useCallback, useMemo } from 'react';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
-import { useGetChatListQuery, useDispatch, useSelect } from '../../core';
+import { useGetChatListQuery } from '../../../core';
 import { ChatListItemBox } from './ChatListItemBox';
-import { customize } from '../customize';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
 
 function useOnSelect() {
-  const dispatch = useDispatch();
+  const { openChat } = useChatGroupContext();
 
   return useCallback(
-    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) =>
-      dispatch({ type: 'chat_open', data: { chatId: info.selectedKeys[0] } }),
-    [dispatch],
+    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) => openChat(info.key as string),
+    [openChat],
   );
 }
 
@@ -27,8 +27,8 @@ function useMenuItems() {
 }
 
 export const ChatList = customize('ChatList', () => {
-  const activeChatId = useSelect((x) => x.ui.chatId, []);
-  const selected = useMemo(() => (activeChatId ? [activeChatId] : []), [activeChatId]);
+  const { chatId } = useChatGroupContext();
+  const selected = useMemo(() => (chatId ? [chatId] : []), [chatId]);
   const onSelect = useOnSelect();
   const items = useMenuItems();