@webinex/chatify 1.0.3-rc3 → 2.0.0-build1

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/{CreateChatPanel → ChatGroup/Create}/CreateChatPanel.tsx

@@ -1,43 +1,39 @@
-import { useAddChatMutation, useDispatch } from '../../core';
+import { useAddChatMutation } from '../../../core';
 import { useCallback } from 'react';
-import { uniqId } from '../../util';
-import { useLocalizer } from '../localizer';
+import { useLocalizer } from '../../localizer';
 import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { Button } from 'antd';
-import { Icon } from '../Icon';
+import { Icon } from '../../common/Icon';
+import { useChatGroupContext } from '../ChatGroupContext';
 
 function useSubmit() {
-  const [add, { isFetching }] = useAddChatMutation();
-  const dispatch = useDispatch();
+  const [add, { isLoading }] = useAddChatMutation();
+  const { openChat } = useChatGroupContext();
 
   const onSubmit = useCallback(
     (value: CreateChatFormValue) =>
       add({
         name: value.name,
         members: value.members,
-        requestId: uniqId(),
-      }).then((id) => dispatch({ type: 'chat_open', data: { chatId: id } })),
-    [add, dispatch],
+      })
+        .unwrap()
+        .then((id) => openChat(id)),
+    [add, openChat],
   );
 
-  return [onSubmit, isFetching] as const;
-}
-
-function useOnClose() {
-  const dispatch = useDispatch();
-  return useCallback(() => dispatch({ type: 'new_chat_close', data: undefined }), [dispatch]);
+  return [onSubmit, isLoading] as const;
 }
 
 export const CreateChatPanel = customize('CreateChatPanel', () => {
   const localizer = useLocalizer();
   const [onSubmit, submitting] = useSubmit();
-  const onClose = useOnClose();
+  const { toggleNewChat } = useChatGroupContext();
 
   return (
     <div className="wxchtf-create-chat-panel">
       <Button
-        onClick={onClose}
+        onClick={() => toggleNewChat()}
         className="wxchtf-create-chat-panel-close"
         type="link"
         icon={<Icon type="close" />}

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();
 

package/src/ui/ChatGroup/List/ChatListItemAvatar.tsx

@@ -0,0 +1,22 @@
+import { color } from '../../color';
+import { Icon } from '../../common/Icon';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
+  const { id } = props.chat;
+
+  return (
+    <div
+      className="wxchtf-chat-avatar"
+      style={
+        {
+          '--background-color': color(id, { lightness: 90 }),
+          '--color': color(id, { saturation: 60, lightness: 65 }),
+        } as any
+      }
+    >
+      <Icon type="chat" />
+    </div>
+  );
+});

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

@@ -1,8 +1,9 @@
-import { ChatListItem as ChatListItemModel } from '../../core';
-import { customize } from '../customize';
+import { ChatListItem as ChatListItemModel } from '../../../core';
+import { customize } from '../../customize';
 import { ChatListItemName } from './ChatListItemName';
 import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
 import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
 
 export interface ChatListItemBoxProps {
   chat: ChatListItemModel;
@@ -14,9 +15,12 @@ export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItem
 
   return (
     <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
-      <ChatListItemName {...props} />
-      <ChatListItemUnreadCount {...props} />
-      <ChatListItemLastMessage {...props} />
+      <ChatListItemAvatar {...props} />
+      <span className="wxchtf-chat-info">
+        <ChatListItemName {...props} />
+        <ChatListItemUnreadCount {...props} />
+        <ChatListItemLastMessage {...props} />
+      </span>
     </div>
   );
 });

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

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import type { ChatListItemBoxProps } from './ChatListItemBox';
 import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
 import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';

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

@@ -1,5 +1,4 @@
-import { Avatar } from '../Avatar';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import type { ChatListItemBoxProps } from './ChatListItemBox';
 
 export const ChatListItemLastMessageAuthor = customize(
@@ -11,10 +10,6 @@ export const ChatListItemLastMessageAuthor = customize(
       return null;
     }
 
-    return (
-      <div className="wxchtf-chat-last-author">
-        <Avatar account={message.sentBy} /> {message.sentBy.name}
-      </div>
-    );
+    return <div className="wxchtf-chat-last-author">{message.sentBy.name}</div>;
   },
 );

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

@@ -1,7 +1,7 @@
-import { useLocalizer } from '../localizer';
-import { formatSystemMessage } from '../SystemMessage/SystemMessageRow';
+import { useLocalizer } from '../../localizer';
+import { formatSystemMessage } from '../../Conversation/SystemMessage';
 import { FC } from 'react';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import type { ChatListItemBoxProps } from './ChatListItemBox';
 
 export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(

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

@@ -1,5 +1,5 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
 import { ChatListItemBoxProps } from './ChatListItemBox';
 
 export const ChatListItemLastMessageSentAt = customize(

package/src/ui/ChatGroup/List/ChatListItemName.tsx

@@ -0,0 +1,8 @@
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
+  const { chat } = props;
+
+  return <div className="wxchtf-chat-name">{chat.name}</div>;
+});

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

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { ChatListItemBoxProps } from './ChatListItemBox';
 
 export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {

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

@@ -0,0 +1,31 @@
+import { ChatList } from './ChatList';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListItemBox } from './ChatListItemBox';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+
+export * from './ChatList';
+export * from './ChatListItemAvatar';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemLastMessageSentAt';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';
+
+export interface ChatListCustomizeValue {
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+}

package/src/ui/ChatGroup/index.ts

@@ -0,0 +1,5 @@
+export * from './Create';
+export * from './Layout';
+export * from './List';
+export * from './ChatGroupContext';
+export * from './ChatGroupPanel';

package/src/ui/Chatify.tsx

@@ -1,154 +1,9 @@
-import { CSSProperties, FC, useMemo } from 'react';
-import { useReadMonitor } from '../core';
-import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-import { CustomizeProvider, CustomizeProviderValue } from './customize';
-import { ChatHeaderMembers } from './ChatPanel/ChatHeaderMembers';
-import { ChatMembersButton } from './ChatPanel/ChatMembersButton';
-import { AddChatButton } from './AddChatButton';
-import { ChatName } from './ChatName';
-
-import { Aside, Main, Body, Footer, Header } from './Layout';
-
-import {
-  ChatListItemBox,
-  ChatListItemLastMessageContent,
-  ChatListItemLastMessageAuthor,
-  ChatListItemLastMessage,
-  ChatListItemUnreadCount,
-  ChatListItemName,
-  ChatListItemLastMessageSentAt,
-} from './ChatList';
-
-import {
-  SendingMessageBox,
-  SendingMessageContent,
-  SendingMessageInfoBox,
-  SendingMessageText,
-} from './SendingMessage';
-
-import {
-  MessageBox,
-  MessageRow,
-  MessageContent,
-  MessageText,
-  MessageAuthor,
-  MessageInfoBox,
-} from './Message';
-
-import { MessageReadObserver } from './MessageReadObserver';
-import { Icon } from './Icon';
-import { SystemMessageRow } from './SystemMessage/SystemMessageRow';
-import { ChatList } from './ChatList';
-import { ChatBody, ChatHeader, ChatHeaderName, ChatPanel } from './ChatPanel';
-import { InputBox, InputFilesBox, InputSubmitButtonBox, InputTextBox } from './InputBox';
-import { SystemMessageBox } from './SystemMessage';
-import {
-  CreateChatForm,
-  CreateChatMemberInput,
-  CreateChatNameInput,
-  CreateChatPanel,
-} from './CreateChatPanel';
-
-export interface ChatifyCustomizeValue {
-  // ./ChatList
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
-
-  // ./Layout
-  Header?: typeof Header.Component | null;
-  Footer?: typeof Footer.Component | null;
-  Body?: typeof Body.Component | null;
-  Main?: typeof Main.Component | null;
-  Aside?: typeof Aside.Component | null;
-
-  // ./Message
-  MessageAuthor?: typeof MessageAuthor.Component | null;
-  MessageBox?: typeof MessageBox.Component | null;
-  MessageContent?: typeof MessageContent.Component | null;
-  MessageInfoBox?: typeof MessageInfoBox.Component | null;
-  MessageRow?: typeof MessageRow.Component | null;
-  MessageText?: typeof MessageText.Component | null;
-
-  // ./SendingMessage
-  SendingMessageBox?: typeof SendingMessageBox.Component | null;
-  SendingMessageContent?: typeof SendingMessageContent.Component | null;
-  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
-  SendingMessageText?: typeof SendingMessageText.Component | null;
-
-  // ./ChatPanel
-  ChatBody?: typeof ChatBody.Component | null;
-  ChatHeader?: typeof ChatHeader.Component | null;
-  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
-  ChatHeaderName?: typeof ChatHeaderName.Component | null;
-  ChatPanel?: typeof ChatPanel.Component | null;
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-
-  // ./InputBox
-  InputBox?: typeof InputBox.Component | null;
-  InputFilesBox?: typeof InputFilesBox.Component | null;
-  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
-  InputTextBox?: typeof InputTextBox.Component | null;
-
-  // ./SystemMessage
-  SystemMessageBox?: typeof SystemMessageBox.Component | null;
-  SystemMessageRow?: typeof SystemMessageRow.Component | null;
-
-  // ./CreateChatPanel
-  CreateChatForm?: typeof CreateChatForm.Component | null;
-  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
-  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
-  CreateChatPanel?: typeof CreateChatPanel.Component | null;
-
-  MessageReadObserver?: typeof MessageReadObserver.Component | null;
-  Avatar?: typeof Avatar.Component | null;
-  AddChatButton?: typeof AddChatButton.Component | null;
-  ChatName?: typeof ChatName.Component | null;
-  Icon?: typeof Icon.Component | null;
-}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatifyCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  useReadMonitor();
-
-  return (
-    <div className={className + ' wxchtf-chatify'} style={style}>
-      <Header />
-      <Body />
-      <Footer />
-    </div>
-  );
-}
-
-const DEFAULT_CUSTOMIZE: ChatifyCustomizeValue = {
-  Header: null,
-  Footer: null,
+import { ChatPanel } from './Chat';
+import { ChatGroupPanel } from './ChatGroup';
+import { ThreadPanel } from './Thread';
+
+export const Chatify = {
+  Thread: ThreadPanel,
+  ChatGroup: ChatGroupPanel,
+  Chat: ChatPanel,
 };
-
-export const Chatify: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
-  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeProvider value={customizeValue as CustomizeProviderValue}>
-        <Content {...props} />
-      </CustomizeProvider>
-    </LocalizerContext.Provider>
-  );
-};
-
-Chatify.displayName = 'Chatify';