@webinex/chatify 2.0.0-alpha8 → 2.0.0-alpha9

package/src/ui/Chat/Members/ChatMembersPreview.tsx

@@ -14,7 +14,7 @@ export const ChatMembersPreview = customize('ChatMembersPreview', () => {
   }
 
   return (
-    <AntdAvatar.Group maxCount={5}>
+    <AntdAvatar.Group max={{ count: 5 }}>
       {chat.members.map((x) => (
         <Tooltip key={x.id} title={x.name}>
           <Avatar account={x} />

package/src/ui/ChatGroup/ChatGroupPanel.tsx

@@ -2,7 +2,7 @@ import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
 import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
 import { CreateChatPanelCustomizeValue } from './Create';
 import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
-import { ChatListCustomizeValue } from './List';
+import { ChatListPanelCustomizeValue } from './List';
 import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
 import { chatifyApi } from '../../core';
 import { CustomizeContext } from '../customize';
@@ -11,7 +11,7 @@ import { ChatViewCustomizeValue } from '../Chat';
 export interface ChatGroupCustomizeValue
   extends ChatViewCustomizeValue,
     CreateChatPanelCustomizeValue,
-    ChatListCustomizeValue,
+    ChatListPanelCustomizeValue,
     ChatGroupLayoutCustomizeValue {}
 
 export interface ChatifyProps {

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

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

package/src/ui/ChatGroup/List/ChatListPanel.tsx

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

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

@@ -1,31 +1,8 @@
-import { ChatList } from './ChatList';
-import { ChatListItemAvatar } from './ChatListItemAvatar';
-import { ChatListItemBox } from './ChatListItemBox';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListCustomizeValue } from '../../common';
+import { ChatListPanel } from './ChatListPanel';
 
-export * from './ChatList';
-export * from './ChatListItemAvatar';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemLastMessageSentAt';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';
+export * from './ChatListPanel';
 
-export interface ChatListCustomizeValue {
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-}
+export type ChatListPanelCustomizeValue = ChatListCustomizeValue & {
+  ChatListPanel?: typeof ChatListPanel.Component | null;
+};

package/src/ui/Chatify.tsx

@@ -2,8 +2,14 @@ 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

@@ -30,7 +30,19 @@ export interface ConversationCustomizeValue
 }
 
 export const Conversation = customize('Conversation', (props: ConversationProps) => {
-  const { value, hasMore, messages, nextLoading, onNext, onRead, onSend, isReading, noReadTracking } = props;
+  const {
+    value,
+    hasMore,
+    messages,
+    nextLoading,
+    onNext,
+    onRead,
+    onSend,
+    isReading,
+    noReadTracking,
+    onClose,
+  } = props;
+
   const { id, active, name, lastReadMessageId } = value;
 
   const context = useMemo<ConversationContextValue>(
@@ -47,6 +59,7 @@ export const Conversation = customize('Conversation', (props: ConversationProps)
       onSend,
       isReading,
       noReadTracking,
+      onClose,
     }),
     [
       id,
@@ -61,6 +74,7 @@ export const Conversation = customize('Conversation', (props: ConversationProps)
       lastReadMessageId,
       isReading,
       noReadTracking,
+      onClose,
     ],
   );
 

package/src/ui/Conversation/ConversationActions.tsx

@@ -1,5 +1,12 @@
+import { Button } from 'antd';
 import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+import { Icon } from '../common';
 
 export const ConversationActions = customize('ConversationActions', () => {
-  return null;
+  const { onClose } = useConversation();
+
+  if (!onClose) return null;
+
+  return <Button onClick={onClose} type="link" icon={<Icon type="close" />} />;
 });

package/src/ui/Conversation/ConversationContext.ts

@@ -15,11 +15,12 @@ export interface ConversationContextValue extends ConversationValue {
   nextLoading: boolean;
   noReadTracking?: boolean;
 
-  isReading: (id: string) => boolean;
+  isReading?: (id: string) => boolean;
   onNext: () => void;
-  onSend: (message: MessageBody) => void;
-  onRead: (id: string) => void;
+  onSend?: (message: MessageBody) => void;
+  onRead?: (id: string) => void;
   flippo?: Flippo;
+  onClose?: () => void;
 }
 
 export const ConversationContext = React.createContext<ConversationContextValue>(undefined!);

package/src/ui/Conversation/ConversationHeader.tsx

@@ -1,22 +1,18 @@
 import { Col, Row } from 'antd';
-import { customize, useCustomize } from '../customize';
+import { customize } from '../customize';
 import { ConversationName } from './ConversationName';
 import { ConversationActions } from './ConversationActions';
 
 export const ConversationHeader = customize('ConversationHeader', () => {
-  const Actions = useCustomize(ConversationActions);
-
   return (
     <div className="wxchtf-conversation-header">
       <Row justify="space-between" align="middle">
         <Col>
           <ConversationName />
         </Col>
-        {Actions && (
-          <Col className="wxchtf-conversation-actions">
-            <Actions />
-          </Col>
-        )}
+        <Col className="wxchtf-conversation-actions">
+          <ConversationActions />
+        </Col>
       </Row>
     </div>
   );

package/src/ui/Conversation/InputBox/InputBox.tsx

@@ -15,6 +15,10 @@ function useFormState() {
   const { onUpload, files, loading, setFiles, showFileBox, onDeleteFile } = useFlippoInputFileBox();
 
   const onSubmit = useCallback(() => {
+    if (!onSend) {
+      return;
+    }
+
     const textValue = text.trim().length === 0 ? null : text.trim();
 
     if ((!textValue && files.length === 0) || loading) {

package/src/ui/Conversation/InputBox/InputTextBox.tsx

@@ -1,6 +1,6 @@
 import { Input } from 'antd';
 import { customize } from '../../customize';
-import isHotkey from 'is-hotkey';
+import { isHotkey } from 'is-hotkey';
 import { RefObject, memo, useCallback } from 'react';
 import { useLocalizer } from '../../localizer';
 import { TextAreaProps } from 'antd/es/input';

package/src/ui/Conversation/Message/MessageInfoBox.tsx

@@ -12,7 +12,7 @@ export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProp
   const my = sentBy.id === me;
   const localizer = useLocalizer();
   const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
-  const reading = !isRead && isReading(id);
+  const reading = !isRead && isReading?.(id);
 
   return (
     <div className="wxchtf-message-info-box">

package/src/ui/Conversation/ReadObserver/MessageReadObserver.tsx

@@ -20,7 +20,7 @@ const Observer: FC<MessageReadObserverProps> = (props) => {
       new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting && !readRef.current) {
           readRef.current = true;
-          onRead(message.id);
+          onRead?.(message.id);
         }
       }),
 

package/src/ui/common/ChatList/ChatList.tsx

@@ -0,0 +1,84 @@
+import { Menu, MenuProps } from 'antd';
+import { useMemo } from 'react';
+import { ChatListItemBox } from './ChatListItemBox';
+import { customize } from '../../customize';
+import { ChatListValue } from './ChatListValue';
+import { useLocalizer } from '../../localizer';
+import { messageSequencePart } from '../../../core';
+
+export interface ChatListProps {
+  className?: string;
+  items: ChatListValue[];
+  selected: string | null;
+  onSelect?: (id: string) => void;
+
+  /**
+   * If true, do not show read status.
+   */
+  noRead?: boolean;
+
+  /**
+   * If set, shows a message at the bottom indicating that only the top N chats are shown.
+   */
+  top?: number;
+}
+
+function useOnSelect(props: ChatListProps) {
+  const { onSelect } = props;
+
+  return useMemo(
+    () =>
+      onSelect
+        ? (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) => onSelect(info.key as string)
+        : undefined,
+    [onSelect],
+  );
+}
+
+function useMenuItems(props: ChatListProps) {
+  //28b2a1a6-c052-4761-ad2d-95ce36d59f06-000000001
+  const { items, noRead, top } = props;
+  const localizer = useLocalizer();
+
+  return useMemo<MenuProps['items']>(() => {
+    const result = items
+      ?.slice()
+      .sort(
+        (a, b) => -messageSequencePart(a.lastMessage.id).localeCompare(messageSequencePart(b.lastMessage.id)),
+      )
+      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} noRead={noRead} /> }));
+
+    if (top != null) {
+      return [
+        ...result,
+        {
+          type: 'item',
+          key: 'top',
+          disabled: true,
+          label: (
+            <div style={{ textAlign: 'center', cursor: 'text', fontStyle: 'italic' }}>
+              {localizer.chatList.topShown(top)}
+            </div>
+          ),
+        },
+      ];
+    }
+
+    return result;
+  }, [items, noRead, top, localizer]);
+}
+
+export const ChatList = customize('ChatList', (props: ChatListProps) => {
+  const { selected: selectedChatId } = props;
+  const selected = useMemo(() => (selectedChatId ? [selectedChatId] : []), [selectedChatId]);
+  const onSelect = useOnSelect(props);
+  const items = useMenuItems(props);
+
+  return (
+    <>
+      {items && (
+        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
+      )}
+    </>
+  );
+});

package/src/ui/{ChatGroup/List → common/ChatList}/ChatListItemBox.tsx

@@ -1,20 +1,26 @@
-import { ChatListItem as ChatListItemModel } from '../../../core';
 import { customize } from '../../customize';
 import { ChatListItemName } from './ChatListItemName';
 import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
 import { ChatListItemLastMessage } from './ChatListItemLastMessage';
 import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListValue } from './ChatListValue';
 
 export interface ChatListItemBoxProps {
-  chat: ChatListItemModel;
+  chat: ChatListValue;
+
+  /**
+   * If true, do not show read status.
+   */
+  noRead?: boolean;
 }
 
 export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
-  const { message, lastReadMessageId } = props.chat;
-  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
+  const { noRead = false } = props;
+  const { lastMessage, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(lastMessage.id) >= 0;
 
   return (
-    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
+    <div className={'wxchtf-chat' + (!read && !noRead ? ' --unread' : '')}>
       <ChatListItemAvatar {...props} />
       <span className="wxchtf-chat-info">
         <ChatListItemName {...props} />

package/src/ui/{ChatGroup/List → common/ChatList}/ChatListItemLastMessageAuthor.tsx

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

package/src/ui/{ChatGroup/List → common/ChatList}/ChatListItemLastMessageContent.tsx

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

package/src/ui/{ChatGroup/List → common/ChatList}/ChatListItemLastMessageSentAt.tsx

@@ -7,7 +7,7 @@ export const ChatListItemLastMessageSentAt = customize(
   (props: ChatListItemBoxProps) => {
     const {
       chat: {
-        message: { sentAt },
+        lastMessage: { sentAt },
       },
     } = props;
 

package/src/ui/{ChatGroup/List → common/ChatList}/ChatListItemUnreadCount.tsx

@@ -4,7 +4,7 @@ import { ChatListItemBoxProps } from './ChatListItemBox';
 export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
   const { totalUnreadCount: unreadCount } = props.chat;
 
-  if (unreadCount <= 0) {
+  if (unreadCount == null || unreadCount <= 0) {
     return null;
   }
 

package/src/ui/common/ChatList/ChatListValue.ts

@@ -0,0 +1,9 @@
+import { MessageBase } from '../../../core';
+
+export interface ChatListValue {
+  id: string;
+  name: string;
+  lastMessage: MessageBase;
+  totalUnreadCount?: number;
+  lastReadMessageId?: string | null;
+}

package/src/ui/common/ChatList/index.ts

@@ -0,0 +1,32 @@
+import { ChatList } from './ChatList';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListItemBox } from './ChatListItemBox';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+
+export * from './ChatList';
+export * from './ChatListItemAvatar';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemLastMessageSentAt';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';
+export * from './ChatListValue';
+
+export interface ChatListCustomizeValue {
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+}

package/src/ui/common/Icon.tsx

@@ -1,18 +1,20 @@
 import { FC } from 'react';
 import { customize } from '../customize';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
-import UserAddOutlined from '@ant-design/icons/UserAddOutlined';
-import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
-import UserDeleteOutlined from '@ant-design/icons/UserDeleteOutlined';
-import UsergroupDeleteOutlined from '@ant-design/icons/UsergroupDeleteOutlined';
-import TeamOutlined from '@ant-design/icons/TeamOutlined';
-import EditOutlined from '@ant-design/icons/EditOutlined';
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
-import EyeOutlined from '@ant-design/icons/EyeOutlined';
-import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
-import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
+import {
+  SendOutlined,
+  PaperClipOutlined,
+  UserAddOutlined,
+  UsergroupAddOutlined,
+  UserDeleteOutlined,
+  UsergroupDeleteOutlined,
+  TeamOutlined,
+  EditOutlined,
+  CloseOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
 
 export type IconType = keyof typeof ICONS;
 

package/src/ui/common/index.ts

@@ -5,6 +5,7 @@ import { MessageSkeleton } from './MessageSkeleton';
 export * from './Avatar';
 export * from './Icon';
 export * from './MessageSkeleton';
+export * from './ChatList';
 
 export interface CommonCustomizeValue {
   Avatar?: typeof Avatar.Component | null;

package/src/ui/index.ts

@@ -1,3 +1,5 @@
+import '../styles/index.scss';
+
 export * from './color';
 export * from './customize';
 export * from './Chatify';
@@ -6,6 +8,4 @@ export * from './Chat';
 export * from './ChatGroup';
 export * from './Conversation';
 export * from './Thread';
-export * from './common/Icon';
-export * from './common/Avatar';
-export * from './common/MessageSkeleton';
+export * from './common';

package/src/ui/localizer.tsx

@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import React, { useContext } from 'react';
 import { SystemMessageText } from '../core';
 
-export interface Localizer {
+export interface LocalizerBase {
   isToday: (value: string) => boolean;
   timestamp: (value: string) => string;
   dateTime: (value: string) => string;
@@ -39,15 +39,21 @@ export interface Localizer {
     kb: (value: number) => string;
     mb: (value: number) => string;
   };
+
+  chatList: {
+    topShown: (count: number) => string;
+  };
 }
 
+export interface Localizer extends LocalizerBase {}
+
 export const LocalizerContext = React.createContext<Localizer>(null!);
 
 export function useLocalizer() {
   return useContext(LocalizerContext);
 }
 
-export const defaultLocalizer: Localizer = {
+const base: LocalizerBase = {
   isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
   timestamp: (value: string) => dayjs(value).format('HH:mm'),
   dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
@@ -93,4 +99,10 @@ export const defaultLocalizer: Localizer = {
     mb: (value: number) =>
       `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`,
   },
+
+  chatList: {
+    topShown: (count: number) => `Latest active ${count} chat${count !== 1 ? 's' : ''} shown`,
+  },
 };
+
+export const defaultLocalizer: Localizer = base as unknown as Localizer;