@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

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

@@ -1,45 +1,45 @@
-import { chatifyApi } 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 }] = chatifyApi.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>
-  );
-});
+import { chatifyApi } 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 }] = chatifyApi.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

@@ -1,19 +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;
-}
+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/ChatGroupActions.tsx

@@ -1,15 +1,15 @@
-import { Space } from 'antd';
-import { CreateChatButton } from '../Create';
-import { AutoReplyButton } from '../AutoReply/AutoReplyButton';
-import { customize } from '../../customize';
-
-export const ChatGroupActions = customize('ChatGroupActions', () => {
-  return (
-    <span className="wxchtf-add-btn-wrapper">
-      <Space.Compact className="wxchtf-add-btn-group">
-        <CreateChatButton />
-        <AutoReplyButton />
-      </Space.Compact>
-    </span>
-  );
-});
+import { Space } from 'antd';
+import { CreateChatButton } from '../Create';
+import { AutoReplyButton } from '../AutoReply/AutoReplyButton';
+import { customize } from '../../customize';
+
+export const ChatGroupActions = customize('ChatGroupActions', () => {
+  return (
+    <span className="wxchtf-add-btn-wrapper">
+      <Space.Compact className="wxchtf-add-btn-group">
+        <CreateChatButton />
+        <AutoReplyButton />
+      </Space.Compact>
+    </span>
+  );
+});

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

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

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

@@ -1,10 +1,17 @@
-import { customize } from '../../customize';
-import { ChatGroupAside } from './ChatGroupAside';
-import { ChatGroupMain } from './ChatGroupMain';
-
-export const ChatGroupBody = customize('ChatGroupBody', () => (
-  <div className="wxchtf-body">
-    <ChatGroupAside />
-    <ChatGroupMain />
-  </div>
-));
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupMain } from './ChatGroupMain';
+
+export const ChatGroupBody = customize('ChatGroupBody', () => {
+  const { compact, view } = useChatGroupContext();
+  const isAsideShown = !compact || !view;
+  const isMainShown = !compact || view;
+
+  return (
+    <div className="wxchtf-body">
+      {isAsideShown && <ChatGroupAside />}
+      {isMainShown && <ChatGroupMain />}
+    </div>
+  );
+});

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

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

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

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

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

@@ -1,19 +1,21 @@
-import { customize } from '../../customize';
-import { CreateChatPanel } from '../Create';
-import { ChatView } from '../../Chat';
-import { useChatGroupContext } from '../ChatGroupContext';
-import { chatifyApi } from '../../../core';
-import { AutoReplyPanel } from '../AutoReply';
-
-export const ChatGroupMain = customize('ChatGroupMain', () => {
-  const { chatId, view } = useChatGroupContext();
-  const chat = chatifyApi.useChatListItem(chatId);
-
-  return (
-    <div className="wxchtf-main">
-      {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
-      {view === 'new-chat' && <CreateChatPanel />}
-      {view === 'auto-reply' && <AutoReplyPanel />}
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { CreateChatPanel } from '../Create';
+import { ChatView } from '../../Chat';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { chatifyApi } from '../../../core';
+import { AutoReplyPanel } from '../AutoReply';
+
+export const ChatGroupMain = customize('ChatGroupMain', () => {
+  const { chatId, view, compact, none } = useChatGroupContext();
+  const chat = chatifyApi.useChatListItem(chatId);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chat && (
+        <ChatView value={chat} key={chatId} compact={compact} onBackClick={compact ? none : undefined} />
+      )}
+      {view === 'new-chat' && <CreateChatPanel />}
+      {view === 'auto-reply' && <AutoReplyPanel />}
+    </div>
+  );
+});

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

@@ -1,22 +1,22 @@
-import { ChatGroupActions } from './ChatGroupActions';
-import { ChatGroupAside } from './ChatGroupAside';
-import { ChatGroupHeader } from './ChatGroupHeader';
-import { ChatGroupFooter } from './ChatGroupFooter';
-import { ChatGroupMain } from './ChatGroupMain';
-import { ChatGroupBody } from './ChatGroupBody';
-
-export * from './ChatGroupActions';
-export * from './ChatGroupAside';
-export * from './ChatGroupHeader';
-export * from './ChatGroupFooter';
-export * from './ChatGroupMain';
-export * from './ChatGroupBody';
-
-export interface ChatGroupLayoutCustomizeValue {
-  ChatGroupActions?: typeof ChatGroupActions.Component | null;
-  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;
-}
+import { ChatGroupActions } from './ChatGroupActions';
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupHeader } from './ChatGroupHeader';
+import { ChatGroupFooter } from './ChatGroupFooter';
+import { ChatGroupMain } from './ChatGroupMain';
+import { ChatGroupBody } from './ChatGroupBody';
+
+export * from './ChatGroupActions';
+export * from './ChatGroupAside';
+export * from './ChatGroupHeader';
+export * from './ChatGroupFooter';
+export * from './ChatGroupMain';
+export * from './ChatGroupBody';
+
+export interface ChatGroupLayoutCustomizeValue {
+  ChatGroupActions?: typeof ChatGroupActions.Component | null;
+  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/ChatGroup/List/ChatListPanel.tsx

@@ -1,28 +1,28 @@
-import { useMemo } from 'react';
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { useChatGroupContext } from '../ChatGroupContext';
-import { ChatListValue, ChatList } from '../../common';
-
-function useData() {
-  const { data: chats } = chatifyApi.useGetChatListQuery();
-  return useMemo(
-    () =>
-      chats?.map(
-        (x): ChatListValue => ({
-          id: x.id,
-          name: x.name,
-          lastMessage: x.message,
-          lastReadMessageId: x.lastReadMessageId,
-        }),
-      ) ?? [],
-    [chats],
-  );
-}
-
-export const ChatListPanel = customize('ChatListPanel', () => {
-  const { chatId, openChat } = useChatGroupContext();
-  const data = useData();
-
-  return <ChatList items={data} selected={chatId} onSelect={openChat} />;
-});
+import { useMemo } from 'react';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { ChatListValue, ChatList } from '../../common';
+
+function useData() {
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  return useMemo(
+    () =>
+      chats?.map(
+        (x): ChatListValue => ({
+          id: x.id,
+          name: x.name,
+          lastMessage: x.message,
+          lastReadMessageId: x.lastReadMessageId,
+        }),
+      ) ?? [],
+    [chats],
+  );
+}
+
+export const ChatListPanel = customize('ChatListPanel', () => {
+  const { chatId, openChat } = useChatGroupContext();
+  const data = useData();
+
+  return <ChatList items={data} selected={chatId} onSelect={openChat} />;
+});

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

@@ -1,8 +1,8 @@
-import { ChatListCustomizeValue } from '../../common';
-import { ChatListPanel } from './ChatListPanel';
-
-export * from './ChatListPanel';
-
-export type ChatListPanelCustomizeValue = ChatListCustomizeValue & {
-  ChatListPanel?: typeof ChatListPanel.Component | null;
-};
+import { ChatListCustomizeValue } from '../../common';
+import { ChatListPanel } from './ChatListPanel';
+
+export * from './ChatListPanel';
+
+export type ChatListPanelCustomizeValue = ChatListCustomizeValue & {
+  ChatListPanel?: typeof ChatListPanel.Component | null;
+};

package/src/ui/ChatGroup/index.ts

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

package/src/ui/Chatify.tsx

@@ -1,15 +1,15 @@
-import { ChatPanel } from './Chat';
-import { ChatGroupPanel } from './ChatGroup';
-import { ThreadPanel } from './Thread';
-
-export interface ChatifyType {
-  Thread: typeof ThreadPanel;
-  ChatGroup: typeof ChatGroupPanel;
-  Chat: typeof ChatPanel;
-}
-
-export const Chatify = {
-  Thread: ThreadPanel,
-  ChatGroup: ChatGroupPanel,
-  Chat: ChatPanel,
-} as unknown as ChatifyType;
+import { ChatPanel } from './Chat';
+import { ChatGroupPanel } from './ChatGroup';
+import { ThreadPanel } from './Thread';
+
+export interface ChatifyType {
+  Thread: typeof ThreadPanel;
+  ChatGroup: typeof ChatGroupPanel;
+  Chat: typeof ChatPanel;
+}
+
+export const Chatify = {
+  Thread: ThreadPanel,
+  ChatGroup: ChatGroupPanel,
+  Chat: ChatPanel,
+} as unknown as ChatifyType;

package/src/ui/Conversation/Conversation.tsx

@@ -1,92 +1,96 @@
-import { ConversationHeader } from './ConversationHeader';
-import { ConversationBody } from './ConversationBody';
-import { customize } from '../customize';
-import { ConversationName } from './ConversationName';
-import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
-import { useMemo } from 'react';
-import { InputBox, InputBoxCustomizeValue } from './InputBox';
-import { ConversationActions } from './ConversationActions';
-import { MessageCustomizeValue } from './Message';
-import { SendingMessageCustomizeValue } from './SendingMessage';
-import { SystemMessageCustomizeValue } from './SystemMessage';
-import { CommonCustomizeValue } from '../common';
-import type { Flippo } from '@webinex/flippo';
-
-export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
-  value: ConversationValue;
-}
-
-export interface ConversationCustomizeValue
-  extends InputBoxCustomizeValue,
-    MessageCustomizeValue,
-    SendingMessageCustomizeValue,
-    SystemMessageCustomizeValue,
-    CommonCustomizeValue {
-  ConversationActions?: typeof ConversationActions.Component | null;
-  ConversationBody?: typeof ConversationBody.Component | null;
-  ConversationHeader?: typeof ConversationHeader.Component | null;
-  ConversationName?: typeof ConversationName.Component | null;
-  flippo?: Flippo;
-}
-
-export const Conversation = customize('Conversation', (props: ConversationProps) => {
-  const {
-    value,
-    hasMore,
-    messages,
-    nextLoading,
-    onNext,
-    onRead,
-    onSend,
-    isReading,
-    noReadTracking,
-    onClose,
-  } = props;
-
-  const { id, active, name, lastReadMessageId } = value;
-
-  const context = useMemo<ConversationContextValue>(
-    () => ({
-      id,
-      name,
-      active,
-      lastReadMessageId,
-      hasMore,
-      messages,
-      nextLoading,
-      onNext,
-      onRead,
-      onSend,
-      isReading,
-      noReadTracking,
-      onClose,
-    }),
-    [
-      id,
-      name,
-      active,
-      onNext,
-      onRead,
-      onSend,
-      hasMore,
-      messages,
-      nextLoading,
-      lastReadMessageId,
-      isReading,
-      noReadTracking,
-      onClose,
-    ],
-  );
-
-  return (
-    <ConversationContext.Provider value={context}>
-      <div className="wxchtf-conversation">
-        <div className="wxchtf-conversation-main">
-          <ConversationHeader />
-          <ConversationBody />
-          {active && <InputBox />}
-        </div>
-      </div>
-    </ConversationContext.Provider>
-  );
-});
+import { ConversationHeader } from './ConversationHeader';
+import { ConversationBody } from './ConversationBody';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
+import { useMemo } from 'react';
+import { InputBox, InputBoxCustomizeValue } from './InputBox';
+import { ConversationActions } from './ConversationActions';
+import { MessageCustomizeValue } from './Message';
+import { SendingMessageCustomizeValue } from './SendingMessage';
+import { SystemMessageCustomizeValue } from './SystemMessage';
+import { CommonCustomizeValue } from '../common';
+import type { Flippo } from '@webinex/flippo';
+
+export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
+  value: ConversationValue;
+  onBackClick?: () => void;
+}
+
+export interface ConversationCustomizeValue
+  extends InputBoxCustomizeValue,
+    MessageCustomizeValue,
+    SendingMessageCustomizeValue,
+    SystemMessageCustomizeValue,
+    CommonCustomizeValue {
+  ConversationActions?: typeof ConversationActions.Component | null;
+  ConversationBody?: typeof ConversationBody.Component | null;
+  ConversationHeader?: typeof ConversationHeader.Component | null;
+  ConversationName?: typeof ConversationName.Component | null;
+  flippo?: Flippo;
+}
+
+export const Conversation = customize('Conversation', (props: ConversationProps) => {
+  const {
+    value,
+    hasMore,
+    messages,
+    nextLoading,
+    onNext,
+    onRead,
+    onSend,
+    isReading,
+    noReadTracking,
+    onClose,
+    compact,
+    onBackClick,
+  } = props;
+
+  const { id, active, name, lastReadMessageId } = value;
+
+  const context = useMemo<ConversationContextValue>(
+    () => ({
+      id,
+      name,
+      active,
+      lastReadMessageId,
+      hasMore,
+      messages,
+      nextLoading,
+      onNext,
+      onRead,
+      onSend,
+      isReading,
+      noReadTracking,
+      onClose,
+      compact,
+    }),
+    [
+      id,
+      name,
+      active,
+      onNext,
+      onRead,
+      onSend,
+      hasMore,
+      messages,
+      nextLoading,
+      lastReadMessageId,
+      isReading,
+      noReadTracking,
+      onClose,
+    ],
+  );
+
+  return (
+    <ConversationContext.Provider value={context}>
+      <div className="wxchtf-conversation">
+        <div className="wxchtf-conversation-main">
+          <ConversationHeader onBackClick={onBackClick} />
+          <ConversationBody />
+          {active && <InputBox />}
+        </div>
+      </div>
+    </ConversationContext.Provider>
+  );
+});