@webinex/chatify 2.0.0-alpha7 → 2.0.0-alpha9

package/src/styles/conversation.scss

@@ -0,0 +1,200 @@
+@use './variables.scss' as vars;
+@use './mixins.scss' as mixins;
+
+.wxchtf-conversation {
+  flex: auto;
+  display: flex;
+  flex-flow: row nowrap;
+  min-width: 0;
+
+  .wxchtf-conversation-main {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    min-width: 0;
+
+    .wxchtf-conversation-header {
+      padding: 15px 20px;
+      line-height: 24px;
+      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-conversation-name {
+        font-weight: 600;
+        font-size: 16px;
+        flex: none;
+
+        &.--editable {
+          cursor: pointer;
+        }
+      }
+
+      .wxchtf-conversation-actions {
+        display: inline-flex;
+      }
+
+      .wxchtf-chat-members {
+        display: inline-flex;
+        gap: 6px;
+      }
+    }
+
+    .wxchtf-conversation-body {
+      flex: 1 1 auto;
+      height: 100px;
+      overflow-y: auto;
+      background: white;
+      padding: 2rem 1rem;
+      padding-right: 1rem;
+      display: flex;
+      flex-flow: column-reverse nowrap;
+      align-items: center;
+
+      @include mixins.scrollbar();
+
+      .wxchtf-message,
+      .wxchtf-sending-message,
+      .wxchtf-system-message,
+      .wxchtf-message-skeleton {
+        margin-bottom: 8px;
+        max-width: vars.$messageBoxWidth;
+        width: 100%;
+
+        &:first-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .wxchtf-message,
+      .wxchtf-sending-message {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+
+        & > div {
+          min-width: 0;
+        }
+
+        &:not(.--my) {
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &.--my {
+          direction: rtl;
+          justify-content: flex-start;
+
+          .wxchtf-message-author {
+            display: none;
+          }
+
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
+            direction: ltr;
+            border-bottom-right-radius: 0;
+            background-color: vars.$myMessageBackground;
+          }
+
+          .wxchtf-message-info-box {
+            text-align: right;
+          }
+        }
+
+        .wxchtf-message-author {
+          margin-right: 15px;
+          flex: none;
+
+          .ant-avatar {
+            @include mixins.avatarSize(vars.$avatarSize);
+          }
+        }
+
+        .wxchtf-message-info-box,
+        .wxchtf-sending-message-info-box {
+          text-align: left;
+          margin-bottom: 3px;
+
+          .wxchtf-message-author-name,
+          .wxchtf-message-sent-at,
+          .wxchtf-message-read-box,
+          .wxchtf-sending-message-sending-box {
+            display: inline-block;
+            font-size: 0.85em;
+            opacity: 0.5;
+          }
+
+          .wxchtf-message-sent-at,
+          .wxchtf-message-read-box,
+          .wxchtf-sending-message-sending-box {
+            margin-left: 5px;
+          }
+        }
+
+        .wxchtf-message-content,
+        .wxchtf-sending-message-content {
+          width: fit-content;
+          min-width: 300px;
+          max-width: 70%;
+          padding: 12px 19px;
+          background: white;
+          background-color: vars.$messageBackground;
+          display: block;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+          border-radius: 24px;
+
+          .wxchtf-message-text {
+            line-height: 21px;
+          }
+        }
+      }
+
+      .wxchtf-system-message {
+        font-style: italic;
+        position: relative;
+        text-align: center;
+        color: #0e0f1799;
+
+        .wxchtf-text,
+        .wxchtf-timestamp {
+          position: relative;
+          z-index: 1;
+          padding-inline: 8px;
+          display: inline-block;
+          font-size: 0.85em;
+          background-color: white;
+        }
+
+        .wxchtf-timestamp {
+          padding-left: 10px;
+        }
+      }
+
+      .wxchtf-message-skeleton {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-end;
+
+        .wxchtf-avatar {
+          margin-right: 15px;
+        }
+
+        .wxchtf-avatar .ant-skeleton-avatar {
+          width: vars.$avatarSize;
+          height: vars.$avatarSize;
+          line-height: vars.$avatarSize;
+        }
+
+        .wxchtf-content {
+          width: 300px;
+          height: 100px;
+          border-radius: vars.$messageBorderRadius;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
+}

package/src/styles/index.scss

@@ -5,6 +5,8 @@
 @use './chat.scss';
 @use './input.scss';
 @use './members.scss';
+@use './chat-list.scss';
+@use './conversation.scss';
 
 .wxchtf-message.--my .wxchtf-file-list .wxchtf-file {
   background-color: darken($color: vars.$myMessageBackground, $amount: 3%);

package/src/ui/Chat/ChatEditableHeaderName.tsx

@@ -2,7 +2,7 @@ import { Input, Tooltip } from 'antd';
 import { chatifyApi } from '../../core';
 import { customize } from '../customize';
 import { useEffect, useState } from 'react';
-import isHotkey from 'is-hotkey';
+import { isHotkey } from 'is-hotkey';
 import { useConversation } from '../Conversation';
 
 const isEscape = isHotkey('escape');

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;
+}