@webinex/chatify 1.0.0-rc2 → 1.0.0-rc3

package/src/styles/chat.scss

@@ -0,0 +1,222 @@
+.wxchtf-chatify {
+  .wxchtf-chat-panel {
+    flex: auto;
+    display: flex;
+    flex-flow: row nowrap;
+
+    .wxchtf-chat-main {
+      flex: 1;
+      display: flex;
+      flex-flow: column nowrap;
+
+      .wxchtf-chat-header {
+        border-bottom: $border;
+        padding: 0.5rem 1rem;
+
+        .wxchtf-chat-name {
+          font-weight: 600;
+          flex: none;
+
+          &.--editable {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .wxchtf-chat-body {
+        flex: 1 1 auto;
+        height: 100px;
+        overflow-y: auto;
+        background: $chatBodyBackground;
+        padding: 2rem 1rem;
+        display: flex;
+        flex-flow: column-reverse nowrap;
+
+        @include scrollbar();
+
+        @media only screen and (min-width: 1120px) {
+          padding-right: 30%;
+        }
+
+        .wxchtf-message,
+        .wxchtf-sending-message {
+          display: flex;
+          flex-flow: row nowrap;
+          width: 100%;
+          align-items: flex-end;
+
+          &.--my {
+            direction: rtl;
+            justify-content: flex-start;
+
+            .wxchtf-message-author {
+              margin-right: 0;
+              margin-left: 15px;
+            }
+
+            .wxchtf-message-content,
+            .wxchtf-sending-message-content {
+              direction: ltr;
+              border-bottom-left-radius: 10px;
+              border-bottom-right-radius: 0;
+              background-color: $myMessageBackground;
+            }
+          }
+
+          .wxchtf-message-author {
+            margin-right: 15px;
+
+            .ant-avatar {
+              @include avatarSize($avatarSize);
+              box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+            }
+          }
+
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
+            min-width: 300px;
+            max-width: 70%;
+            border-radius: $messageBorderRadius;
+            padding: 0.75rem 1rem;
+            background: white;
+            border-bottom-left-radius: 0;
+            background-color: $messageBackground;
+            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+            display: block;
+            white-space: pre-wrap;
+            overflow-wrap: break-word;
+
+            .wxchtf-message-info-box,
+            .wxchtf-sending-message-info-box {
+              text-align: right;
+
+              .wxchtf-message-sent-at,
+              .wxchtf-message-read-box,
+              .wxchtf-sending-message-sending-box {
+                display: inline-block;
+                font-style: italic;
+                font-size: 0.75em;
+                margin-top: 0.5rem;
+                opacity: 0.5;
+              }
+
+              .wxchtf-message-read-box,
+              .wxchtf-sending-message-sending-box {
+                margin-left: 5px;
+              }
+            }
+          }
+        }
+
+        .wxchtf-system-message {
+          font-style: italic;
+          position: relative;
+          text-align: center;
+
+          .wxchtf-text,
+          .wxchtf-timestamp {
+            display: inline-block;
+            opacity: 0.9;
+            font-size: 0.85em;
+          }
+
+          .wxchtf-timestamp {
+            margin-left: 1rem;
+          }
+        }
+
+        .wxchtf-message,
+        .wxchtf-sending-message,
+        .wxchtf-system-message,
+        .wxchtf-message-skeleton {
+          margin-bottom: 2rem;
+
+          &:first-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .wxchtf-message-skeleton {
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: flex-end;
+
+          .wxchtf-avatar {
+            margin-right: 15px;
+          }
+
+          .wxchtf-avatar .ant-skeleton-avatar {
+            width: $avatarSize;
+            height: $avatarSize;
+            line-height: $avatarSize;
+          }
+
+          .wxchtf-content {
+            width: 300px;
+            height: 100px;
+            border-radius: $messageBorderRadius;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+
+      .wxchtf-input-form {
+        flex: none;
+        max-height: 300px;
+        display: flex;
+        flex-flow: column nowrap;
+
+        .wxchtf-input-box {
+          flex: none;
+          display: flex;
+          flex-flow: row nowrap;
+          padding: 1rem 0;
+          border-top: $border;
+
+          @mixin iconBtn {
+            flex: none;
+            display: flex;
+            padding: 0 1rem;
+            align-items: flex-end;
+
+            .ant-btn.ant-btn-icon-only .anticon {
+              font-size: 1.5rem;
+            }
+          }
+
+          .wxchtf-add-files-box {
+            @include iconBtn();
+          }
+
+          .wxchtf-text-input-box {
+            flex: auto;
+
+            textarea {
+              resize: none;
+              border: none;
+              outline: none;
+              box-shadow: none;
+
+              @include scrollbar();
+            }
+          }
+
+          .wxchtf-submit-btn-box {
+            @include iconBtn();
+          }
+        }
+      }
+    }
+
+    .wxchtf-chat-members-panel {
+      min-width: 300px;
+      border-left: $border;
+
+      .wxchtf-chat-members-list {
+        .wxchtf-chat-members-list-item {
+          padding-inline: 1rem;
+        }
+      }
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,79 @@
+@import './variables.scss';
+@import './mixins.scss';
+@import './keyframes.scss';
+@import './aside.scss';
+@import './settings.scss';
+@import './chat.scss';
+
+.wxchtf-chatify {
+  border: $border;
+  display: flex;
+  flex-flow: column nowrap;
+  background: $background;
+  border-radius: $radius;
+
+  .wxchtf-header {
+    min-height: 2rem;
+    border-bottom: $border;
+  }
+
+  .wxchtf-body {
+    flex: 1 0;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .wxchtf-footer {
+    min-height: 2rem;
+    border-top: $border;
+  }
+}
+
+.wxchtf-main {
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .wxchtf-create-chat {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+
+    form {
+      padding: 2rem;
+      max-width: 700px;
+      width: 100%;
+
+      .wxchtf-create-chat-member-input-list {
+        max-height: 15rem;
+        overflow-y: auto;
+
+        .ant-list-item {
+          padding-inline: 0.5rem;
+
+          &.--selected {
+            background-color: #e6f4ff;
+          }
+
+          .ant-checkbox-wrapper {
+            width: 100%;
+
+            & > span:last-child {
+              flex: 1;
+
+              .ant-list-item-meta {
+                align-items: center;
+
+                .ant-list-item-meta-content h4 {
+                  margin-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/settings.scss

@@ -0,0 +1,5 @@
+.wxchtf-chatify {
+  .wxchtf-chat-settings {
+    padding-inline: 1rem;
+  }
+}

package/src/ui/AddChatButton.tsx

@@ -1,9 +1,9 @@
 import { Button } from 'antd';
 import { useDispatch } from '../core';
-import { FC, useCallback } from 'react';
-import { customize } from '../util';
+import { useCallback } from 'react';
+import { customize } from './customize';
 
-const _AddChatButton: FC = () => {
+export const AddChatButton = customize('AddChatButton', () => {
   const dispatch = useDispatch();
   const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
 
@@ -12,8 +12,4 @@ const _AddChatButton: FC = () => {
       Add chat
     </Button>
   );
-};
-
-_AddChatButton.displayName = 'AddChatButton';
-
-export const AddChatButton = customize('AddChatButton', _AddChatButton);
+});

package/src/ui/Avatar.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Account } from '../core';
 import { Avatar as AntdAvatar } from 'antd';
-import { customize } from '../util';
+import { customize } from './customize';
 
 export interface AvatarProps {
   account: Account;

package/src/ui/ChatList/ChatList.tsx

@@ -0,0 +1,42 @@
+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 { ChatListItemBox } from './ChatListItemBox';
+import { customize } from '../customize';
+
+function useOnSelect() {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) =>
+      dispatch({ type: 'chat_open', data: { chatId: info.selectedKeys[0] } }),
+    [dispatch],
+  );
+}
+
+function useMenuItems() {
+  const { data: chats } = useGetChatListQuery();
+
+  return useMemo<MenuItemType[] | undefined>(() => {
+    return chats
+      ?.slice()
+      .sort((a, b) => -a.message.id.substring(47).localeCompare(b.message.id.substring(47)))
+      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
+  }, [chats]);
+}
+
+export const ChatList = customize('ChatList', () => {
+  const activeChatId = useSelect((x) => x.ui.chatId, []);
+  const selected = useMemo(() => (activeChatId ? [activeChatId] : []), [activeChatId]);
+  const onSelect = useOnSelect();
+  const items = useMenuItems();
+
+  return (
+    <>
+      {items && (
+        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
+      )}
+    </>
+  );
+});

package/src/ui/ChatList/ChatListItemBox.tsx

@@ -0,0 +1,22 @@
+import { ChatListItem as ChatListItemModel } from '../../core';
+import { customize } from '../customize';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+
+export interface ChatListItemBoxProps {
+  chat: ChatListItemModel;
+}
+
+export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
+  const { message, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
+
+  return (
+    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
+      <ChatListItemName {...props} />
+      <ChatListItemUnreadCount {...props} />
+      <ChatListItemLastMessage {...props} />
+    </div>
+  );
+});

package/src/ui/ChatList/ChatListItemLastMessage.tsx

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

package/src/ui/ChatList/ChatListItemLastMessageAuthor.tsx

@@ -0,0 +1,20 @@
+import { Avatar } from '../Avatar';
+import { customize } from '../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageAuthor = customize(
+  'ChatListItemLastMessageAuthor',
+  (props: ChatListItemBoxProps) => {
+    const { message } = props.chat;
+
+    if (message.sentBy.id === 'chatify::system') {
+      return null;
+    }
+
+    return (
+      <div className="wxchtf-chat-last-author">
+        <Avatar account={message.sentBy} /> {message.sentBy.name}
+      </div>
+    );
+  },
+);

package/src/ui/ChatList/ChatListItemLastMessageContent.tsx

@@ -0,0 +1,21 @@
+import { useLocalizer } from '../localizer';
+import { formatSystemMessage } from '../SystemMessage/SystemMessageRow';
+import { FC } from 'react';
+import { customize } from '../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
+  'ChatListItemLastMessageContent',
+  (props) => {
+    const { message } = props.chat;
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-message">
+        {message.sentBy.id === 'chatify::system'
+          ? formatSystemMessage(localizer, message.text)
+          : message.text}
+      </div>
+    );
+  },
+);

package/src/ui/ChatList/ChatListItemName.tsx

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

package/src/ui/ChatList/ChatListItemUnreadCount.tsx

@@ -0,0 +1,12 @@
+import { customize } from '../customize';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
+  const { totalUnreadCount: unreadCount } = props.chat;
+
+  if (unreadCount <= 0) {
+    return null;
+  }
+
+  return <div className="wxchtf-unread-count">{unreadCount}</div>;
+});

package/src/ui/ChatList/index.ts

@@ -0,0 +1,7 @@
+export * from './ChatList';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';

package/src/ui/ChatName.tsx

@@ -1,15 +1,10 @@
-import { FC } from 'react';
-import { customize } from '../util';
+import { customize } from './customize';
 
 export interface ChatNameProps {
   name: string;
 }
 
-const _ChatName: FC<ChatNameProps> = (props) => {
+export const ChatName = customize('ChatName', (props: ChatNameProps) => {
   const { name } = props;
   return <>{name}</>;
-};
-
-_ChatName.displayName = 'ChatName';
-
-export const ChatName = customize('ChatName', _ChatName);
+});

package/src/ui/ChatPanel/ChatBody.tsx

@@ -0,0 +1,44 @@
+import { MessageBox } from '../Message';
+import { useGetMessagesQuery } from '../../core';
+import { Next } from '../Next';
+import { SendingMessageBox } from '../SendingMessage';
+import { SystemMessageBox } from '../SystemMessage/SystemMessageBox';
+import { MessageSkeleton } from '../MessageSkeleton';
+import { customize } from '../customize';
+
+export interface ChatBodyProps {
+  id: string;
+}
+
+export const ChatBody = customize('ChatBody', (props: ChatBodyProps) => {
+  const { id } = props;
+  const { data: messages } = useGetMessagesQuery({ chatId: id });
+
+  return (
+    <div className="wxchtf-chat-body">
+      {!messages && <MessageSkeleton count={5} />}
+      {messages?.map((x, index) => {
+        if (x.type === 'message' && x.sentBy.id === 'chatify::system') {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        switch (x.type) {
+          case 'message': {
+            return <MessageBox message={x} key={x.id} />;
+          }
+
+          case 'sending': {
+            return <SendingMessageBox key={x.requestId} text={x.text} files={x.files} />;
+          }
+
+          case 'next': {
+            return <Next key={'next-' + messages.length + '-' + index} chatId={id} />;
+          }
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+});

package/src/ui/ChatPanel/ChatHeader.tsx

@@ -0,0 +1,33 @@
+import { Col, Row, Space } from 'antd';
+import { ChatHeaderMembers } from './ChatHeaderMembers';
+import { ChatMembersButton } from './ChatMembersButton';
+import { customize } from '../customize';
+import { ChatHeaderName } from './ChatHeaderName';
+import { useSelect } from '../../core';
+
+export interface ChatHeaderProps {
+  id: string;
+}
+
+export const ChatHeader = customize('ChatHeader', (props: ChatHeaderProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+
+  return (
+    <div className="wxchtf-chat-header">
+      <Row justify="space-between" align="middle">
+        <Col>
+          <ChatHeaderName id={id} />
+        </Col>
+        {chat.active && (
+          <Col className="wxchtf-chat-members">
+            <Space align="center">
+              <ChatHeaderMembers id={id} />
+              <ChatMembersButton id={id} />
+            </Space>
+          </Col>
+        )}
+      </Row>
+    </div>
+  );
+});

package/src/ui/{ChatHeaderMembers.tsx → ChatPanel/ChatHeaderMembers.tsx}

@@ -1,15 +1,14 @@
-import { FC } from 'react';
-import { useChat } from '../core';
+import { useGetChatQuery } from '../../core';
 import { Avatar, Tooltip } from 'antd';
-import { customize } from '../util';
+import { customize } from '../customize';
 
 export interface ChatHeaderMembersProps {
   id: string;
 }
 
-const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
+export const ChatHeaderMembers = customize('ChatHeaderMembers', (props: ChatHeaderMembersProps) => {
   const { id } = props;
-  const { data: chat } = useChat({ chatId: id });
+  const { data: chat } = useGetChatQuery({ chatId: id });
 
   if (!chat?.members) {
     return null;
@@ -24,7 +23,4 @@ const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
       ))}
     </Avatar.Group>
   );
-};
-
-_ChatHeaderMembers.displayName = 'ChatHeaderMembers';
-export const ChatHeaderMembers = customize('ChatHeaderMembers', _ChatHeaderMembers);
+});