@webinex/chatify 1.0.3-rc3 → 2.0.0-build1

package/src/styles/chat.scss

@@ -1,22 +1,33 @@
+@use './variables.scss' as vars;
+
 .wxchtf-chatify {
-  .wxchtf-chat-panel {
+  .wxchtf-chat {
     flex: auto;
     display: flex;
     flex-flow: row nowrap;
+    min-width: 1;
+  }
 
-    .wxchtf-chat-main {
+  .wxchtf-conversation {
+    flex: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    min-width: 1;
+
+    .wxchtf-conversation-main {
       flex: 1;
       display: flex;
       flex-flow: column nowrap;
+      min-width: 0;
 
-      .wxchtf-chat-header {
+      .wxchtf-conversation-header {
         padding: 15px 20px;
         line-height: 24px;
-        z-index: 1;
+        z-index: 2;
         box-shadow: 0px 2px 4px 0px rgba(88, 99, 107, 0.04), 0px 1px 9px -1px rgba(88, 99, 107, 0.04),
           0px 1px 2px 0px rgba(88, 99, 107, 0.06);
 
-        .wxchtf-chat-name {
+        .wxchtf-conversation-name {
           font-weight: 600;
           font-size: 16px;
           flex: none;
@@ -26,13 +37,17 @@
           }
         }
 
+        .wxchtf-conversation-actions {
+          display: inline-flex;
+        }
+
         .wxchtf-chat-members {
           display: inline-flex;
           gap: 6px;
         }
       }
 
-      .wxchtf-chat-body {
+      .wxchtf-conversation-body {
         flex: 1 1 auto;
         height: 100px;
         overflow-y: auto;
@@ -50,7 +65,7 @@
         .wxchtf-system-message,
         .wxchtf-message-skeleton {
           margin-bottom: 8px;
-          max-width: $messageBoxWidth;
+          max-width: vars.$messageBoxWidth;
           width: 100%;
 
           &:first-child {
@@ -64,6 +79,10 @@
           flex-flow: row nowrap;
           align-items: flex-start;
 
+          & > div {
+            min-width: 0;
+          }
+
           &:not(.--my) {
             .wxchtf-message-content,
             .wxchtf-sending-message-content {
@@ -83,7 +102,7 @@
             .wxchtf-sending-message-content {
               direction: ltr;
               border-bottom-right-radius: 0;
-              background-color: $myMessageBackground;
+              background-color: vars.$myMessageBackground;
             }
 
             .wxchtf-message-info-box {
@@ -93,9 +112,10 @@
 
           .wxchtf-message-author {
             margin-right: 15px;
+            flex: none;
 
             .ant-avatar {
-              @include avatarSize($avatarSize);
+              @include avatarSize(vars.$avatarSize);
             }
           }
 
@@ -127,7 +147,7 @@
             max-width: 70%;
             padding: 12px 19px;
             background: white;
-            background-color: $messageBackground;
+            background-color: vars.$messageBackground;
             display: block;
             white-space: pre-wrap;
             overflow-wrap: break-word;
@@ -158,17 +178,6 @@
           .wxchtf-timestamp {
             padding-left: 10px;
           }
-
-          &::after {
-            content: '';
-            position: absolute;
-            height: 1px;
-            width: 100%;
-            left: 0;
-            top: 50%;
-            z-index: 0;
-            background-color: #0000000f;
-          }
         }
 
         .wxchtf-message-skeleton {
@@ -181,31 +190,19 @@
           }
 
           .wxchtf-avatar .ant-skeleton-avatar {
-            width: $avatarSize;
-            height: $avatarSize;
-            line-height: $avatarSize;
+            width: vars.$avatarSize;
+            height: vars.$avatarSize;
+            line-height: vars.$avatarSize;
           }
 
           .wxchtf-content {
             width: 300px;
             height: 100px;
-            border-radius: $messageBorderRadius;
+            border-radius: vars.$messageBorderRadius;
             border-bottom-left-radius: 0;
           }
         }
       }
     }
-
-    .wxchtf-chat-members-panel {
-      min-width: 300px;
-      box-shadow: -4px 0px 20px -5px #0cd9e214, -2px 1px 12px #006e720f;
-
-      .wxchtf-chat-members-list {
-        .wxchtf-chat-members-list-item {
-          padding-inline: 1rem;
-          border-block-end: none;
-        }
-      }
-    }
   }
 }

package/src/styles/index.scss

@@ -1,15 +1,16 @@
-@import './variables.scss';
+@use './variables.scss' as vars;
 @import './mixins.scss';
 @import './keyframes.scss';
 @import './aside.scss';
 @import './chat.scss';
 @import './input.scss';
+@import './members.scss';
 
 .wxchtf-chatify {
   display: flex;
   flex-flow: column nowrap;
-  background: $background;
-  border-radius: $radius;
+  background: vars.$background;
+  border-radius: vars.$radius;
 
   .wxchtf-header {
     min-height: 2rem;
@@ -50,10 +51,11 @@
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
-  border-top-right-radius: $radius;
-  border-bottom-right-radius: $radius;
+  border-top-right-radius: vars.$radius;
+  border-bottom-right-radius: vars.$radius;
   box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
   z-index: 2;
+  min-width: 0;
 
   .wxchtf-create-chat-panel {
     display: flex;

package/src/styles/input.scss

@@ -1,3 +1,5 @@
+@use './variables.scss' as vars;
+
 .wxchtf-input-form {
   flex: none;
   max-height: 300px;
@@ -10,7 +12,7 @@
     display: flex;
     flex-flow: row nowrap;
     padding: 8px;
-    max-width: $messageBoxWidth;
+    max-width: vars.$messageBoxWidth;
     width: 100%;
     margin: auto;
     background: rgba(245, 245, 245, 1);

package/src/styles/members.scss

@@ -0,0 +1,13 @@
+.wxchtf-chatify {
+  .wxchtf-chat-members-panel {
+    min-width: 300px;
+    box-shadow: -4px 0px 20px -5px #0cd9e214, -2px 1px 12px #006e720f;
+
+    .wxchtf-chat-members-list {
+      .wxchtf-chat-members-list-item {
+        padding-inline: 1rem;
+        border-block-end: none;
+      }
+    }
+  }
+}

package/src/ui/Chat/ChatContext.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+export interface ChatContext {
+  id: string;
+  showMembers: boolean;
+  onShowMembers: (value: boolean) => void;
+}
+
+const ChatReactContext = React.createContext<ChatContext>(null!);
+
+export function useChatContext() {
+  return useContext(ChatReactContext);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function ChatContext(props: PropsWithChildren<{ id: string }>) {
+  const { id, children } = props;
+  const [showMembers, onShowMembers] = useState(false);
+
+  const value = useMemo<ChatContext>(
+    () => ({
+      id,
+      showMembers,
+      onShowMembers,
+    }),
+    [id, showMembers],
+  );
+
+  return <ChatReactContext.Provider value={value}>{children}</ChatReactContext.Provider>;
+}

package/src/ui/{ChatPanel/ChatHeaderName.tsx → Chat/ChatEditableHeaderName.tsx}

@@ -1,13 +1,9 @@
 import { Input, Tooltip } from 'antd';
-import { useSelect, useUpdateChatNameMutation } from '../../core';
-import { ChatName } from '../ChatName';
+import { useUpdateChatNameMutation } from '../../core';
 import { customize } from '../customize';
 import { useEffect, useState } from 'react';
 import isHotkey from 'is-hotkey';
-
-export interface ChatHeaderNameProps {
-  id: string;
-}
+import { useConversation } from '../Conversation';
 
 const isEscape = isHotkey('escape');
 const isEnter = isHotkey('enter');
@@ -17,22 +13,20 @@ function useUpdateChatName(id: string, value: string) {
   return () => updateChatName({ id, name: value });
 }
 
-export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const name = chat.name;
+export const ChatEditableHeaderName = customize('ChatEditableHeaderName', () => {
+  const { id, name, active } = useConversation();
   const [editNameValue, setEditNameValue] = useState('');
   const [edit, setEdit] = useState(false);
   const updateChatName = useUpdateChatName(id, editNameValue);
 
   useEffect(() => {
     if (edit) {
-      setEditNameValue(name);
+      setEditNameValue(name ?? '');
     }
   }, [edit, name]);
 
-  if (!chat.active) {
-    return <span className="wxchtf-chat-name">{name}</span>;
+  if (!active) {
+    return <span className="wxchtf-conversation-name">{name}</span>;
   }
 
   if (edit) {
@@ -61,8 +55,8 @@ export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderName
 
   return (
     <Tooltip title="Click to edit name...">
-      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
-        <ChatName name={name} />
+      <span className="wxchtf-conversation-name --editable" onClick={() => setEdit(true)}>
+        {name}
       </span>
     </Tooltip>
   );

package/src/ui/Chat/ChatHeaderActions.tsx

@@ -0,0 +1,19 @@
+import { ChatMembersPreview } from './Members';
+import { ChatMembersButton } from './Members';
+import { customize } from '../customize';
+import { useConversation } from '../Conversation';
+
+export const ChatHeaderActions = customize('ChatHeaderActions', () => {
+  const { active } = useConversation();
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat-members">
+      <ChatMembersPreview />
+      <ChatMembersButton />
+    </div>
+  );
+});

package/src/ui/Chat/ChatPanel.tsx

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CustomizeContext } from '../customize';
+import { ChatView, ChatViewCustomizeValue } from './ChatView';
+import { useGetChatQuery } from '../../core';
+
+export interface ChatPanelCustomizeValue extends ChatViewCustomizeValue {}
+
+export interface ChatPanelProps {
+  id: string;
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatPanelCustomizeValue;
+}
+
+export function ChatPanel(props: ChatPanelProps) {
+  const { id, className = '', customize, localizer = defaultLocalizer, style } = props;
+  const { data: chat } = useGetChatQuery({ id });
+
+  return (
+    <div className={`wxchtf-chatify wxchtf-chat-panel ${className}`} style={style}>
+      <LocalizerContext.Provider value={localizer}>
+        <CustomizeContext.Provider value={customize as any}>
+          {chat && <ChatView value={chat} key={id} />}
+        </CustomizeContext.Provider>
+      </LocalizerContext.Provider>
+    </div>
+  );
+}

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);
@@ -87,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>;
+}