@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/{ui/styles → styles}/aside.scss

@@ -1,94 +1,94 @@
-.wxchtf-aside {
-  flex: none;
-  width: 300px;
-  border-right: $border;
-  display: flex;
-  flex-flow: column nowrap;
-
-  .wxchtf-chats.ant-menu {
-    flex: 1 1 auto;
-    height: 100px;
-    overflow-y: auto;
-
-    @include scrollbar();
-
-    .ant-menu-item {
-      padding: 0;
-      height: unset;
-      margin: 0;
-      width: 100%;
-      border-radius: 0;
-      line-height: 1.5;
-      border-top: $border;
-
-      &:first-child {
-        border-top: none;
-      }
-
-      &.ant-menu-item-selected .wxchtf-chat-name {
-        font-weight: 600;
-      }
-
-      .wxchtf-chat {
-        padding: 0.5rem 1rem;
-        position: relative;
-
-        &.--unread {
-          .wxchtf-chat-last {
-            font-weight: bold;
-          }
-        }
-
-        .wxchtf-chat-name {
-          font-weight: bold;
-          display: inline-block;
-        }
-
-        .wxchtf-unread-count {
-          display: inline-block;
-          padding: 0.2rem;
-          min-width: 1rem;
-          height: 1.2rem;
-          line-height: 0.7rem;
-          margin-left: 0.5rem;
-          border-radius: 50%;
-          text-align: center;
-          font-size: 0.7rem;
-          background: $unreadCountBackground;
-        }
-
-        .wxchtf-chat-last {
-          $size: 25px;
-
-          font-style: italic;
-          opacity: 0.75;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: $size;
-
-          .wxchtf-chat-last-author {
-            display: inline-block;
-            margin-right: 0.5rem;
-
-            .ant-avatar {
-              display: inline-block;
-              border: none;
-              margin-right: 5px;
-
-              @include avatarSize($size);
-            }
-
-            &::after {
-              content: ':';
-            }
-          }
-
-          .wxchtf-chat-last-message {
-            display: inline;
-          }
-        }
-      }
-    }
-  }
-}
+.wxchtf-aside {
+  flex: none;
+  width: 300px;
+  border-right: $border;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .wxchtf-chat-list.ant-menu {
+    flex: 1 1 auto;
+    height: 100px;
+    overflow-y: auto;
+
+    @include scrollbar();
+
+    .ant-menu-item {
+      padding: 0;
+      height: unset;
+      margin: 0;
+      width: 100%;
+      border-radius: 0;
+      line-height: 1.5;
+      border-top: $border;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &.ant-menu-item-selected .wxchtf-chat-name {
+        font-weight: 600;
+      }
+
+      .wxchtf-chat {
+        padding: 0.5rem 1rem;
+        position: relative;
+
+        &.--unread {
+          .wxchtf-chat-last {
+            font-weight: bold;
+          }
+        }
+
+        .wxchtf-chat-name {
+          font-weight: bold;
+          display: inline-block;
+        }
+
+        .wxchtf-unread-count {
+          display: inline-block;
+          padding: 0.2rem;
+          min-width: 1rem;
+          height: 1.2rem;
+          line-height: 0.7rem;
+          margin-left: 0.5rem;
+          border-radius: 50%;
+          text-align: center;
+          font-size: 0.7rem;
+          background: $unreadCountBackground;
+        }
+
+        .wxchtf-chat-last {
+          $size: 25px;
+
+          font-style: italic;
+          opacity: 0.75;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: $size;
+
+          .wxchtf-chat-last-author {
+            display: inline-block;
+            margin-right: 0.5rem;
+
+            .ant-avatar {
+              display: inline-block;
+              border: none;
+              margin-right: 5px;
+
+              @include avatarSize($size);
+            }
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          .wxchtf-chat-last-message {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+}

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/{ui/styles → styles}/keyframes.scss

@@ -1,14 +1,14 @@
-@keyframes fadeInFromNone {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-
-  1% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
+@keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/src/{ui/styles → styles}/mixins.scss

@@ -1,20 +1,20 @@
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #dfdfdf;
-  }
-}
-
-@mixin avatarSize($size) {
-  width: $size;
-  height: $size;
-  line-height: $size - 2px;
-}
+@mixin scrollbar() {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #dfdfdf;
+  }
+}
+
+@mixin avatarSize($size) {
+  width: $size;
+  height: $size;
+  line-height: $size - 2px;
+}

package/src/styles/settings.scss

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

package/src/{ui/styles → 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,19 +1,15 @@
-import { Button } from 'antd';
-import { useDispatch } from '../core';
-import { FC, useCallback } from 'react';
-import { customize } from '../util';
-
-const _AddChatButton: FC = () => {
-  const dispatch = useDispatch();
-  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
-
-  return (
-    <Button onClick={onAddChat} icon={'+'} type="link">
-      Add chat
-    </Button>
-  );
-};
-
-_AddChatButton.displayName = 'AddChatButton';
-
-export const AddChatButton = customize('AddChatButton', _AddChatButton);
+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 '../util';
-
-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

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