@webinex/chatify 1.0.0-alpha03 → 1.0.0-alpha05

package/dist/esm/types/ui/Message.d.ts

@@ -1,5 +1,18 @@
+import { FC, Ref, RefObject } from 'react';
 import { Message as MessageModel } from '../core';
 export interface MessageProps {
     message: MessageModel;
 }
-export declare function Message(props: MessageProps): import("react/jsx-runtime").JSX.Element;
+export interface MessageBoxProps extends MessageProps {
+    containerRef?: Ref<HTMLDivElement>;
+}
+export declare const MessageAuthor: import("../util").Customizable<FC<MessageProps>, string>;
+export declare const MessageText: import("../util").Customizable<FC<MessageProps>, string>;
+export declare const MessageInfoBox: import("../util").Customizable<FC<MessageProps>, string>;
+export declare const MessageBody: import("../util").Customizable<FC<MessageProps>, string>;
+export declare const MessageBox: import("../util").Customizable<FC<MessageBoxProps>, string>;
+export declare const Message: import("../util").Customizable<FC<MessageProps>, string>;
+export interface MessageReadObserverProps extends MessageProps {
+    messageRef: RefObject<HTMLDivElement | null>;
+}
+export declare const MessageReadObserver: import("../util").Customizable<FC<MessageReadObserverProps>, string>;

package/dist/esm/types/ui/SendingMessage.d.ts

@@ -1,6 +1,10 @@
+import { FC } from 'react';
 import { File } from '../core';
 export interface SendingMessageProps {
     text: string;
     files: File[];
 }
-export declare function SendingMessage(props: SendingMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare const SendingMessageText: import("../util").Customizable<FC<SendingMessageProps>, string>;
+export declare const SendingMessageInfoBox: import("../util").Customizable<FC<SendingMessageProps>, string>;
+export declare const SendingMessageBody: import("../util").Customizable<FC<SendingMessageProps>, string>;
+export declare const SendingMessage: import("../util").Customizable<FC<SendingMessageProps>, string>;

package/dist/esm/types/ui/index.d.ts

@@ -5,3 +5,4 @@ export * from './AddChatButton';
 export * from './Header';
 export * from './ChatHeader';
 export * from './ChatHeaderMembers';
+export * from './ChatListItem';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, FC, CSSProperties } from 'react';
+import React, { PropsWithChildren, FC, Ref, RefObject, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AxiosInstance } from 'axios';
 
@@ -45,7 +45,7 @@ interface Account {
     name: string;
     avatar: string;
 }
-interface Message {
+interface Message$1 {
     id: string;
     chatId: string;
     text: string;
@@ -63,7 +63,7 @@ interface Chat {
 interface ChatListItem {
     id: string;
     name: string;
-    message: Message;
+    message: Message$1;
     unreadCount: number;
 }
 interface SendMessageRequest {
@@ -127,7 +127,7 @@ declare class ChatifyClient {
         chatId: string;
         skip?: number;
         take?: number;
-    }) => Promise<Message[]>;
+    }) => Promise<Message$1[]>;
     send: (request: SendMessageRequest) => Promise<void>;
     read: (request: ReadRequest) => Promise<void>;
     removeMember: (request: RemoveMemberRequest) => Promise<void>;
@@ -192,7 +192,7 @@ declare const ACTIONS: {
         chatId: string;
     }) => State;
     message_received: (state: State, { message, requestId }: {
-        message: Message;
+        message: Message$1;
         requestId: string;
     }) => State;
     chat_created: (state: State, { chat }: {
@@ -251,7 +251,7 @@ declare function useLoadMore({ chatId }: {
 
 type MessageState = ({
     type: 'message';
-} & Message) | {
+} & Message$1) | {
     type: 'more';
 } | {
     type: 'sending';
@@ -296,6 +296,47 @@ declare const AddChatButton: Customizable<FC, "AddChatButton">;
 
 declare const Footer: Customizable<FC, "Footer">;
 
+interface ChatNameProps {
+    name: string;
+}
+declare const ChatName: Customizable<FC<ChatNameProps>, "ChatName">;
+
+interface ChatListItemProps {
+    chat: ChatListItem;
+}
+declare const ChatListItemName: Customizable<FC<ChatListItemProps>, "ChatListItemName">;
+declare const ChatListItemUnreadCount: Customizable<FC<ChatListItemProps>, "ChatListItemUnreadCount">;
+declare const ChatListItemLastMessage: Customizable<FC<ChatListItemProps>, "ChatListItemLastMessage">;
+declare const ChatListItemLastMessageAuthor: Customizable<FC<ChatListItemProps>, string>;
+declare const ChatListItemLastMessageContent: Customizable<FC<ChatListItemProps>, string>;
+declare const ChatListItemView: Customizable<FC<ChatListItemProps>, "ChatListItemView">;
+
+interface SendingMessageProps {
+    text: string;
+    files: File[];
+}
+declare const SendingMessageText: Customizable<FC<SendingMessageProps>, string>;
+declare const SendingMessageInfoBox: Customizable<FC<SendingMessageProps>, string>;
+declare const SendingMessageBody: Customizable<FC<SendingMessageProps>, string>;
+declare const SendingMessage: Customizable<FC<SendingMessageProps>, string>;
+
+interface MessageProps {
+    message: Message$1;
+}
+interface MessageBoxProps extends MessageProps {
+    containerRef?: Ref<HTMLDivElement>;
+}
+declare const MessageAuthor: Customizable<FC<MessageProps>, string>;
+declare const MessageText: Customizable<FC<MessageProps>, string>;
+declare const MessageInfoBox: Customizable<FC<MessageProps>, string>;
+declare const MessageBody: Customizable<FC<MessageProps>, string>;
+declare const MessageBox: Customizable<FC<MessageBoxProps>, string>;
+declare const Message: Customizable<FC<MessageProps>, string>;
+interface MessageReadObserverProps extends MessageProps {
+    messageRef: RefObject<HTMLDivElement | null>;
+}
+declare const MessageReadObserver: Customizable<FC<MessageReadObserverProps>, string>;
+
 interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -303,6 +344,24 @@ interface ChatifyCustomizeValue {
     AddChatButton?: typeof AddChatButton.Component | null;
     ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
     ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
+    ChatName?: typeof ChatName.Component | null;
+    ChatListItem?: typeof ChatListItemView.Component | null;
+    ChatListItemName?: typeof ChatListItemName.Component | null;
+    ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+    ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+    ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+    ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+    SendingMessage?: typeof SendingMessage.Component | null;
+    SendingMessageBody?: typeof SendingMessageBody.Component | null;
+    SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+    SendingMessageText?: typeof SendingMessageText.Component | null;
+    Message?: typeof Message.Component | null;
+    MessageReadObserver?: typeof MessageReadObserver.Component | null;
+    MessageBox?: typeof MessageBox.Component | null;
+    MessageBody?: typeof MessageBody.Component | null;
+    MessageInfoBox?: typeof MessageInfoBox.Component | null;
+    MessageText?: typeof MessageText.Component | null;
+    MessageAuthor?: typeof MessageAuthor.Component | null;
 }
 interface ChatifyProps {
     className?: string;
@@ -327,4 +386,4 @@ declare function ChatifyContext({ value, children }: PropsWithChildren<{
     value: ChatifyContextValue;
 }>): react_jsx_runtime.JSX.Element;
 
-export { ACTIONS, Account, Action, AddChatButton, AddChatRequest, AddMemberRequest, Avatar, AvatarProps, Chat, ChatHeader, ChatHeaderMembers, ChatHeaderMembersProps, ChatHeaderProps, ChatListItem, Chatify, ChatifyClient, ChatifyClientConfig, ChatifyContext, ChatifyContextValue, ChatifyCustomizeValue, ChatifyProps, ChatifySignalRConfig, File, Header, Localizer, LocalizerContext, Message, MessageContent, MessageState, ReadEvent, ReadRequest, Reducer, ReducerProvider, RemoveMemberRequest, SendMessageRequest, defaultLocalizer, useAccounts, useAddChat, useAddMember, useChat, useChatList, useClient, useDispatch, useLoadMore, useLocalizer, useMe, useMessages, useReadMonitor, useReducer, useRemoveMember, useSelect, useSignalRMonitor, useStateRef };
+export { ACTIONS, Account, Action, AddChatButton, AddChatRequest, AddMemberRequest, Avatar, AvatarProps, Chat, ChatHeader, ChatHeaderMembers, ChatHeaderMembersProps, ChatHeaderProps, ChatListItem, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemProps, ChatListItemUnreadCount, ChatListItemView, Chatify, ChatifyClient, ChatifyClientConfig, ChatifyContext, ChatifyContextValue, ChatifyCustomizeValue, ChatifyProps, ChatifySignalRConfig, File, Header, Localizer, LocalizerContext, Message$1 as Message, MessageContent, MessageState, ReadEvent, ReadRequest, Reducer, ReducerProvider, RemoveMemberRequest, SendMessageRequest, defaultLocalizer, useAccounts, useAddChat, useAddMember, useChat, useChatList, useClient, useDispatch, useLoadMore, useLocalizer, useMe, useMessages, useReadMonitor, useReducer, useRemoveMember, useSelect, useSignalRMonitor, useStateRef };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@webinex/chatify",
   "description": "Webinex Wispo",
   "private": false,
-  "version": "1.0.0-alpha03",
+  "version": "1.0.0-alpha05",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",

package/src/core/reducer.tsx

@@ -19,7 +19,7 @@ export function useReducer() {
 
   const dispatch = useCallback((action: Action) => {
     const newState = reducer(state.current, action);
-    if (shallowEqual(state.current, newState)) {
+    if (state.current === newState) {
       return;
     }
 
@@ -63,7 +63,13 @@ export function useSelect<TResult>(
   const [state, setState] = useState(prev.current);
 
   useEffect(() => {
-    return subscribe((state) => {
+    const value = select(reducerState.current);
+    if (!shallowEqual<any>(prev.current, value)) {
+      prev.current = value;
+      setState(value);
+    }
+
+    return subscribe((state: State) => {
       const newValue = select(state);
       if (shallowEqual<any>(newValue, prev.current)) {
         return;

package/src/ui/Aside.tsx

@@ -1,35 +1,8 @@
 import { Menu, MenuProps } from 'antd';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
-import { useChatList, useDispatch, useSelect, ChatListItem } from '../core';
-import { useLocalizer } from './localizer';
-import { formatSystemMessage } from './SystemMessage';
-import { Avatar } from './Avatar';
-
-function Chat(props: { chat: ChatListItem }) {
-  const { chat } = props;
-  const { name, message, unreadCount } = chat;
-  const localizer = useLocalizer();
-
-  return (
-    <div className={'wxchtf-chat' + (!message.read ? ' --unread' : '')}>
-      <div className="wxchtf-chat-name">{name}</div>
-      {unreadCount > 0 && <div className="wxchtf-unread-count">{unreadCount}</div>}
-      <div className="wxchtf-chat-last">
-        {message.sentBy.id !== 'chatify::system' && (
-          <div className="wxchtf-chat-last-author">
-            <Avatar account={message.sentBy} /> {message.sentBy.name}
-          </div>
-        )}
-        <div className="wxchtf-chat-last-message">
-          {message.sentBy.id === 'chatify::system'
-            ? formatSystemMessage(localizer, message.text)
-            : message.text}
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useChatList, useDispatch, useSelect } from '../core';
+import { ChatListItemView } from './ChatListItem';
 
 export function Aside() {
   const activeChatId = useSelect((x) => x.ui.chatId, []);
@@ -49,7 +22,7 @@ export function Aside() {
       return [];
     }
 
-    return chats.map((x) => ({ key: x.id, label: <Chat chat={x} /> }));
+    return chats.map((x) => ({ key: x.id, label: <ChatListItemView chat={x} /> }));
   }, [chats]);
 
   useEffect(() => {

package/src/ui/ChatHeader.tsx

@@ -2,6 +2,7 @@ import { useChat, useSelect, ChatListItem } from '../core';
 import { Col, Row, Space } from 'antd';
 import { ChatHeaderMembers } from './ChatHeaderMembers';
 import { ChatSettingsButton } from './ChatHeaderSettingsButton';
+import { ChatName } from './ChatName';
 
 export interface ChatHeaderProps {
   id: string;
@@ -14,11 +15,12 @@ export function ChatHeader(props: ChatHeaderProps) {
     (x) => x.query['chat-list'].data?.find((x: ChatListItem) => x.id === id),
     [id],
   );
+  const name = chat?.name ?? chatListItem?.name;
 
   return (
     <div className="wxchtf-chat-header">
       <Row justify="space-between" align="middle">
-        <Col className="wxchtf-chat-name">{chat?.name ?? chatListItem?.name}</Col>
+        <Col className="wxchtf-chat-name">{name && <ChatName name={name} />}</Col>
         <Col className="wxchtf-chat-members">
           <Space align="center">
             <ChatHeaderMembers id={id} />

package/src/ui/ChatListItem.tsx

@@ -0,0 +1,101 @@
+import { useLocalizer } from './localizer';
+import { formatSystemMessage } from './SystemMessage';
+import { Avatar } from './Avatar';
+import { ChatName } from './ChatName';
+import { ChatListItem as ChatListItemModel } from '../core';
+import { FC } from 'react';
+import { customize } from '../util';
+
+export interface ChatListItemProps {
+  chat: ChatListItemModel;
+}
+
+const _ChatListItemName: FC<ChatListItemProps> = (props) => {
+  const { name } = props.chat;
+
+  return (
+    <div className="wxchtf-chat-name">
+      <ChatName name={name} />
+    </div>
+  );
+};
+
+_ChatListItemName.displayName = 'ChatListItemName';
+
+export const ChatListItemName = customize('ChatListItemName', _ChatListItemName);
+
+const _ChatListItemUnreadCount: FC<ChatListItemProps> = (props) => {
+  const { unreadCount } = props.chat;
+
+  if (unreadCount <= 0) {
+    return null;
+  }
+
+  return <div className="wxchtf-unread-count">{unreadCount}</div>;
+};
+
+_ChatListItemUnreadCount.displayName = 'ChatListItemUnreadCount';
+
+export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', _ChatListItemUnreadCount);
+
+const _ChatListItemLastMessage: FC<ChatListItemProps> = (props) => {
+  return (
+    <div className="wxchtf-chat-last">
+      <ChatListItemLastMessageAuthor {...props} />
+      <ChatListItemLastMessageContent {...props} />
+    </div>
+  );
+};
+
+_ChatListItemLastMessage.displayName = 'ChatListItemLastMessage';
+
+export const ChatListItemLastMessage = customize('ChatListItemLastMessage', _ChatListItemLastMessage);
+
+export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemProps>, string>(
+  'ChatListItemLastMessageAuthor',
+  (props) => {
+    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>
+    );
+  },
+);
+
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemProps>, string>(
+  '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>
+    );
+  },
+);
+
+const _ChatListItem: FC<ChatListItemProps> = (props) => {
+  const { message } = props.chat;
+
+  return (
+    <div className={'wxchtf-chat' + (!message.read ? ' --unread' : '')}>
+      <ChatListItemName {...props} />
+      <ChatListItemUnreadCount {...props} />
+      <ChatListItemLastMessage {...props} />
+    </div>
+  );
+};
+
+_ChatListItem.displayName = 'ChatListItem';
+
+export const ChatListItemView = customize('ChatListItemView', _ChatListItem);

package/src/ui/ChatName.tsx

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

package/src/ui/Chatify.tsx

@@ -10,6 +10,30 @@ import { ChatSettingsButton } from './ChatHeaderSettingsButton';
 import { Header } from './Header';
 import { AddChatButton } from './AddChatButton';
 import { Footer } from './Footer';
+import { ChatName } from './ChatName';
+import {
+  ChatListItemView,
+  ChatListItemLastMessage,
+  ChatListItemLastMessageAuthor,
+  ChatListItemLastMessageContent,
+  ChatListItemName,
+  ChatListItemUnreadCount,
+} from './ChatListItem';
+import {
+  SendingMessage,
+  SendingMessageBody,
+  SendingMessageInfoBox,
+  SendingMessageText,
+} from './SendingMessage';
+import {
+  Message,
+  MessageAuthor,
+  MessageBody,
+  MessageBox,
+  MessageInfoBox,
+  MessageReadObserver,
+  MessageText,
+} from './Message';
 
 export interface ChatifyCustomizeValue {
   Avatar?: typeof Avatar.Component | null;
@@ -18,6 +42,24 @@ export interface ChatifyCustomizeValue {
   AddChatButton?: typeof AddChatButton.Component | null;
   ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
   ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
+  ChatName?: typeof ChatName.Component | null;
+  ChatListItem?: typeof ChatListItemView.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  SendingMessage?: typeof SendingMessage.Component | null;
+  SendingMessageBody?: typeof SendingMessageBody.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+  Message?: typeof Message.Component | null;
+  MessageReadObserver?: typeof MessageReadObserver.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageBody?: typeof MessageBody.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+  MessageAuthor?: typeof MessageAuthor.Component | null;
 }
 
 export interface ChatifyProps {

package/src/ui/Message.tsx

@@ -1,50 +1,117 @@
 import { useMe } from '../ChatifyContext';
-import { MessageMd } from './MessageMd';
-import { useEffect, useMemo, useRef } from 'react';
+import { FC, Ref, RefObject, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelect, Message as MessageModel } from '../core';
+import { customize } from '../util';
+import { useLocalizer } from './localizer';
+import { Avatar } from './Avatar';
 
 export interface MessageProps {
   message: MessageModel;
 }
 
-export function Message(props: MessageProps) {
+export interface MessageBoxProps extends MessageProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageAuthor = customize<FC<MessageProps>, string>('MessageAuthor', (props) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});
+
+export const MessageText = customize<FC<MessageProps>, string>('MessageText', (props) => {
+  const { text } = props.message;
+  return <div className="wxchtf-message-text">{text}</div>;
+});
+
+export const MessageInfoBox = customize<FC<MessageProps>, string>('MessageInfoBox', (props) => {
   const { message } = props;
+  const { id, sentBy, sentAt, read } = message;
   const me = useMe();
-  const my = message.sentBy.id === me;
-  const dispatch = useDispatch();
-  const ref = useRef<HTMLDivElement | null>(null);
-  const readRef = useRef(false);
-  const reading = useSelect((x) => x.read.queued.includes(message.id), []);
-
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting && !readRef.current && !message.read) {
-          readRef.current = true;
-          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
-        }
-      }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const reading = useSelect((x) => x.read.queued.includes(id), []);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {read !== undefined && !my && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
   );
+});
 
-  useEffect(() => {
-    observer.observe(ref.current!);
-    return () => observer.disconnect();
-  }, [observer]);
+export const MessageBody = customize<FC<MessageProps>, string>('MessageBody', (props) => {
+  return (
+    <div className="wxchtf-message-body">
+      <MessageText {...props} />
+      <MessageInfoBox {...props} />
+    </div>
+  );
+});
+
+export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
+  const { message, containerRef } = props;
+  const { sentBy } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+
+  return (
+    <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
+      <MessageAuthor {...props} />
+      <MessageBody {...props} />
+    </div>
+  );
+});
+
+export const Message = customize<FC<MessageProps>, string>('Message', (props) => {
+  const ref = useRef<HTMLDivElement | null>(null);
 
   return (
-    <MessageMd
-      ref={ref}
-      my={my}
-      text={message.text}
-      files={message.files}
-      author={message.sentBy}
-      timestamp={message.sentAt}
-      read={message.read}
-      sending={false}
-      reading={reading}
-    />
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <MessageBox containerRef={ref} {...props} />
+    </>
   );
+});
+
+export interface MessageReadObserverProps extends MessageProps {
+  messageRef: RefObject<HTMLDivElement | null>;
 }
+export const MessageReadObserver = customize<FC<MessageReadObserverProps>, string>(
+  'MessageReadObserver',
+  (props) => {
+    const { message, messageRef } = props;
+    const dispatch = useDispatch();
+    const readRef = useRef(false);
+
+    const observer = useMemo(
+      () =>
+        new IntersectionObserver(([entry]) => {
+          if (entry.isIntersecting && !readRef.current && !message.read) {
+            readRef.current = true;
+            dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+          }
+        }),
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    );
+
+    useEffect(() => {
+      observer.observe(messageRef.current!);
+      return () => observer.disconnect();
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observer]);
+
+    return <></>;
+  },
+);

package/src/ui/SendingMessage.tsx

@@ -1,14 +1,50 @@
+import { FC } from 'react';
 import { File } from '../core';
-import { MessageMd } from './MessageMd';
+import { customize } from '../util';
+import { useLocalizer } from './localizer';
 
 export interface SendingMessageProps {
   text: string;
   files: File[];
 }
 
-export function SendingMessage(props: SendingMessageProps) {
-  const { text, files } = props;
+export const SendingMessageText = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageText',
+  (props) => {
+    const { text } = props;
+    return <div className="wxchtf-sending-message-text">{text}</div>;
+  },
+);
+
+export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageInfoBox',
+  () => {
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-sending-message-info-box">
+        <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+      </div>
+    );
+  },
+);
+
+export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageBody',
+  (props) => {
+    return (
+      <div className="wxchtf-sending-message-body">
+        <SendingMessageText {...props} />
+        <SendingMessageInfoBox {...props} />
+      </div>
+    );
+  },
+);
+
+export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
   return (
-    <MessageMd text={text} files={files} my={true} sending={true} timestamp={new Date().toUTCString()} />
+    <div className="wxchtf-sending-message">
+      <SendingMessageBody {...props} />
+    </div>
   );
-}
+});

package/src/ui/index.ts

@@ -5,3 +5,4 @@ export * from './AddChatButton';
 export * from './Header';
 export * from './ChatHeader';
 export * from './ChatHeaderMembers';
+export * from './ChatListItem';