@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/styles/variables.scss

@@ -1,10 +1,10 @@
-$borderColor: #ddd;
-$border: 1px solid #ddd;
-$background: white;
-$radius: 4px;
-$chatBodyBackground: #f5f5f5;
-$messageBackground: #e1f5fe;
-$myMessageBackground: #b9f6ca;
-$unreadCountBackground: #ffa726;
-$avatarSize: 40px;
-$messageBorderRadius: 10px;
+$borderColor: #ddd;
+$border: 1px solid #ddd;
+$background: white;
+$radius: 4px;
+$chatBodyBackground: #f5f5f5;
+$messageBackground: #e1f5fe;
+$myMessageBackground: #b9f6ca;
+$unreadCountBackground: #ffa726;
+$avatarSize: 40px;
+$messageBorderRadius: 10px;

package/src/ui/AddChatButton.tsx

@@ -1,15 +1,15 @@
-import { Button } from 'antd';
-import { useDispatch } from '../core';
-import { useCallback } from 'react';
-import { customize } from './customize';
-
-export const AddChatButton = customize('AddChatButton', () => {
-  const dispatch = useDispatch();
-  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
-
-  return (
-    <Button onClick={onAddChat} icon={'+'} type="link">
-      Add chat
-    </Button>
-  );
-});
+import { Button } from 'antd';
+import { useDispatch } from '../core';
+import { useCallback } from 'react';
+import { customize } from './customize';
+
+export const AddChatButton = customize('AddChatButton', () => {
+  const dispatch = useDispatch();
+  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
+
+  return (
+    <Button onClick={onAddChat} icon={'+'} type="link">
+      Add chat
+    </Button>
+  );
+});

package/src/ui/Avatar.tsx

@@ -1,18 +1,18 @@
-import { FC } from 'react';
-import { Account } from '../core';
-import { Avatar as AntdAvatar } from 'antd';
-import { customize } from './customize';
-
-export interface AvatarProps {
-  account: Account;
-}
-
-const _Avatar: FC<AvatarProps> = (props: AvatarProps) => {
-  const { account } = props;
-
-  return <AntdAvatar src={account.avatar} />;
-};
-
-_Avatar.displayName = 'Avatar';
-
-export const Avatar = customize('Avatar', _Avatar);
+import { FC } from 'react';
+import { Account } from '../core';
+import { Avatar as AntdAvatar } from 'antd';
+import { customize } from './customize';
+
+export interface AvatarProps {
+  account: Account;
+}
+
+const _Avatar: FC<AvatarProps> = (props: AvatarProps) => {
+  const { account } = props;
+
+  return <AntdAvatar src={account.avatar} />;
+};
+
+_Avatar.displayName = 'Avatar';
+
+export const Avatar = customize('Avatar', _Avatar);

package/src/ui/ChatList/ChatList.tsx

@@ -1,42 +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} />
-      )}
-    </>
-  );
-});
+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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-export * from './ChatList';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';
+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,10 +1,10 @@
-import { customize } from './customize';
-
-export interface ChatNameProps {
-  name: string;
-}
-
-export const ChatName = customize('ChatName', (props: ChatNameProps) => {
-  const { name } = props;
-  return <>{name}</>;
-});
+import { customize } from './customize';
+
+export interface ChatNameProps {
+  name: string;
+}
+
+export const ChatName = customize('ChatName', (props: ChatNameProps) => {
+  const { name } = props;
+  return <>{name}</>;
+});

package/src/ui/ChatPanel/ChatBody.tsx

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

@@ -1,33 +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>
-  );
-});
+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/ChatPanel/ChatHeaderMembers.tsx

@@ -1,26 +1,26 @@
-import { useGetChatQuery } from '../../core';
-import { Avatar, Tooltip } from 'antd';
-import { customize } from '../customize';
-
-export interface ChatHeaderMembersProps {
-  id: string;
-}
-
-export const ChatHeaderMembers = customize('ChatHeaderMembers', (props: ChatHeaderMembersProps) => {
-  const { id } = props;
-  const { data: chat } = useGetChatQuery({ chatId: id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <Avatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar src={x.avatar}>{x.name}</Avatar>
-        </Tooltip>
-      ))}
-    </Avatar.Group>
-  );
-});
+import { useGetChatQuery } from '../../core';
+import { Avatar, Tooltip } from 'antd';
+import { customize } from '../customize';
+
+export interface ChatHeaderMembersProps {
+  id: string;
+}
+
+export const ChatHeaderMembers = customize('ChatHeaderMembers', (props: ChatHeaderMembersProps) => {
+  const { id } = props;
+  const { data: chat } = useGetChatQuery({ chatId: id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <Avatar.Group maxCount={5}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar src={x.avatar}>{x.name}</Avatar>
+        </Tooltip>
+      ))}
+    </Avatar.Group>
+  );
+});