@webinex/chatify 1.0.0-alpha05 → 1.0.0-alpha07

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, FC, Ref, RefObject, CSSProperties } from 'react';
+/// <reference types="react" />
+import React$1, { PropsWithChildren, FC, Ref, RefObject, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AxiosInstance } from 'axios';
 
@@ -8,29 +9,29 @@ interface Localizer {
         chatCreated: () => string;
     };
     message: {
-        read: () => React.ReactNode;
-        reading: () => React.ReactNode;
-        sending: () => React.ReactNode;
+        read: () => React$1.ReactNode;
+        reading: () => React$1.ReactNode;
+        sending: () => React$1.ReactNode;
     };
     addChat: {
-        title: () => React.ReactNode;
+        title: () => React$1.ReactNode;
         name: {
-            label: () => React.ReactNode;
+            label: () => React$1.ReactNode;
             required: () => string;
             max250: () => string;
         };
         members: {
-            label: () => React.ReactNode;
+            label: () => React$1.ReactNode;
             required: () => string;
         };
-        submitBtn: () => React.ReactNode;
+        submitBtn: () => React$1.ReactNode;
     };
 }
-declare const LocalizerContext: React.Context<Localizer>;
+declare const LocalizerContext: React$1.Context<Localizer>;
 declare function useLocalizer(): Localizer;
 declare const defaultLocalizer: Localizer;
 
-type Customizable<TComponent extends React.ComponentType<any>, TKey extends string> = TComponent & {
+type Customizable<TComponent extends React$1.ComponentType<any>, TKey extends string> = TComponent & {
     Component: TComponent;
     key: TKey;
 };
@@ -45,7 +46,7 @@ interface Account {
     name: string;
     avatar: string;
 }
-interface Message$1 {
+interface Message {
     id: string;
     chatId: string;
     text: string;
@@ -63,7 +64,7 @@ interface Chat {
 interface ChatListItem {
     id: string;
     name: string;
-    message: Message$1;
+    message: Message;
     unreadCount: number;
 }
 interface SendMessageRequest {
@@ -127,7 +128,7 @@ declare class ChatifyClient {
         chatId: string;
         skip?: number;
         take?: number;
-    }) => Promise<Message$1[]>;
+    }) => Promise<Message[]>;
     send: (request: SendMessageRequest) => Promise<void>;
     read: (request: ReadRequest) => Promise<void>;
     removeMember: (request: RemoveMemberRequest) => Promise<void>;
@@ -192,7 +193,7 @@ declare const ACTIONS: {
         chatId: string;
     }) => State;
     message_received: (state: State, { message, requestId }: {
-        message: Message$1;
+        message: Message;
         requestId: string;
     }) => State;
     chat_created: (state: State, { chat }: {
@@ -233,10 +234,10 @@ type Action = {
 
 type Reducer = ReturnType<typeof useReducer>;
 type Subscriber = (state: State) => void;
-declare function useReducer(): readonly [React.MutableRefObject<State>, (action: Action) => void, (subscriber: Subscriber) => () => void];
+declare function useReducer(): readonly [React$1.MutableRefObject<State>, (action: Action) => void, (subscriber: Subscriber) => () => void];
 declare function ReducerProvider({ children }: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
 declare function useDispatch(): (action: Action) => void;
-declare function useStateRef(): React.MutableRefObject<State>;
+declare function useStateRef(): React$1.MutableRefObject<State>;
 declare function useSelect<TResult>(select: (state: State) => TResult, deps: any[]): TResult;
 
 declare function useChat(args: {
@@ -251,7 +252,7 @@ declare function useLoadMore({ chatId }: {
 
 type MessageState = ({
     type: 'message';
-} & Message$1) | {
+} & Message) | {
     type: 'more';
 } | {
     type: 'sending';
@@ -301,15 +302,15 @@ interface ChatNameProps {
 }
 declare const ChatName: Customizable<FC<ChatNameProps>, "ChatName">;
 
-interface ChatListItemProps {
+interface ChatListItemBoxProps {
     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">;
+declare const ChatListItemName: Customizable<FC<ChatListItemBoxProps>, "ChatListItemName">;
+declare const ChatListItemUnreadCount: Customizable<FC<ChatListItemBoxProps>, "ChatListItemUnreadCount">;
+declare const ChatListItemLastMessage: Customizable<FC<ChatListItemBoxProps>, "ChatListItemLastMessage">;
+declare const ChatListItemLastMessageAuthor: Customizable<FC<ChatListItemBoxProps>, string>;
+declare const ChatListItemLastMessageContent: Customizable<FC<ChatListItemBoxProps>, string>;
+declare const ChatListItemBox: Customizable<FC<ChatListItemBoxProps>, "ChatListItemBox">;
 
 interface SendingMessageProps {
     text: string;
@@ -320,19 +321,19 @@ declare const SendingMessageInfoBox: Customizable<FC<SendingMessageProps>, strin
 declare const SendingMessageBody: Customizable<FC<SendingMessageProps>, string>;
 declare const SendingMessage: Customizable<FC<SendingMessageProps>, string>;
 
-interface MessageProps {
-    message: Message$1;
+interface MessageBoxProps {
+    message: Message;
 }
-interface MessageBoxProps extends MessageProps {
+interface MessageRowProps extends MessageBoxProps {
     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 MessageAuthor: Customizable<FC<MessageBoxProps>, string>;
+declare const MessageText: Customizable<FC<MessageBoxProps>, string>;
+declare const MessageInfoBox: Customizable<FC<MessageBoxProps>, string>;
+declare const MessageBody: Customizable<FC<MessageBoxProps>, string>;
+declare const MessageRow: Customizable<FC<MessageRowProps>, string>;
 declare const MessageBox: Customizable<FC<MessageBoxProps>, string>;
-declare const Message: Customizable<FC<MessageProps>, string>;
-interface MessageReadObserverProps extends MessageProps {
+interface MessageReadObserverProps extends MessageBoxProps {
     messageRef: RefObject<HTMLDivElement | null>;
 }
 declare const MessageReadObserver: Customizable<FC<MessageReadObserverProps>, string>;
@@ -345,7 +346,7 @@ interface ChatifyCustomizeValue {
     ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
     ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
     ChatName?: typeof ChatName.Component | null;
-    ChatListItem?: typeof ChatListItemView.Component | null;
+    ChatListItemBox?: typeof ChatListItemBox.Component | null;
     ChatListItemName?: typeof ChatListItemName.Component | null;
     ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
     ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
@@ -355,9 +356,9 @@ interface ChatifyCustomizeValue {
     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;
+    MessageReadObserver?: typeof MessageReadObserver.Component | null;
+    MessageRow?: typeof MessageRow.Component | null;
     MessageBody?: typeof MessageBody.Component | null;
     MessageInfoBox?: typeof MessageInfoBox.Component | null;
     MessageText?: typeof MessageText.Component | null;
@@ -376,6 +377,13 @@ interface ChatHeaderProps {
 }
 declare function ChatHeader(props: ChatHeaderProps): react_jsx_runtime.JSX.Element;
 
+interface SystemMessageProps {
+    text: string;
+    sentAt: string;
+}
+declare function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode;
+declare function SystemMessage(props: SystemMessageProps): react_jsx_runtime.JSX.Element;
+
 declare function useClient(): ChatifyClient;
 declare function useMe(): string;
 interface ChatifyContextValue {
@@ -386,4 +394,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, 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 };
+export { ACTIONS, Account, Action, AddChatButton, AddChatRequest, AddMemberRequest, Avatar, AvatarProps, Chat, ChatHeader, ChatHeaderMembers, ChatHeaderMembersProps, ChatHeaderProps, ChatListItem, ChatListItemBox, ChatListItemBoxProps, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount, Chatify, ChatifyClient, ChatifyClientConfig, ChatifyContext, ChatifyContextValue, ChatifyCustomizeValue, ChatifyProps, ChatifySignalRConfig, File, Header, Localizer, LocalizerContext, Message, MessageAuthor, MessageBody, MessageBox, MessageBoxProps, MessageContent, MessageInfoBox, MessageReadObserver, MessageReadObserverProps, MessageRow, MessageRowProps, MessageState, MessageText, ReadEvent, ReadRequest, Reducer, ReducerProvider, RemoveMemberRequest, SendMessageRequest, SystemMessage, SystemMessageProps, defaultLocalizer, formatSystemMessage, 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-alpha05",
+  "version": "1.0.0-alpha07",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",

package/src/ui/Aside.tsx

@@ -2,7 +2,7 @@ import { Menu, MenuProps } from 'antd';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import { useChatList, useDispatch, useSelect } from '../core';
-import { ChatListItemView } from './ChatListItem';
+import { ChatListItemBox } from './ChatListItem';
 
 export function Aside() {
   const activeChatId = useSelect((x) => x.ui.chatId, []);
@@ -22,7 +22,7 @@ export function Aside() {
       return [];
     }
 
-    return chats.map((x) => ({ key: x.id, label: <ChatListItemView chat={x} /> }));
+    return chats.map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
   }, [chats]);
 
   useEffect(() => {

package/src/ui/ChatBody.tsx

@@ -1,4 +1,4 @@
-import { Message } from './Message';
+import { MessageBox } from './Message';
 import { useMessages } from '../core';
 import { LoadMore } from './LoadMore';
 import { SendingMessage } from './SendingMessage';
@@ -23,7 +23,7 @@ export function ChatBody(props: ChatBodyProps) {
 
         switch (x.type) {
           case 'message': {
-            return <Message message={x} key={x.id} />;
+            return <MessageBox message={x} key={x.id} />;
           }
 
           case 'sending': {

package/src/ui/ChatListItem.tsx

@@ -6,11 +6,11 @@ import { ChatListItem as ChatListItemModel } from '../core';
 import { FC } from 'react';
 import { customize } from '../util';
 
-export interface ChatListItemProps {
+export interface ChatListItemBoxProps {
   chat: ChatListItemModel;
 }
 
-const _ChatListItemName: FC<ChatListItemProps> = (props) => {
+const _ChatListItemName: FC<ChatListItemBoxProps> = (props) => {
   const { name } = props.chat;
 
   return (
@@ -24,7 +24,7 @@ _ChatListItemName.displayName = 'ChatListItemName';
 
 export const ChatListItemName = customize('ChatListItemName', _ChatListItemName);
 
-const _ChatListItemUnreadCount: FC<ChatListItemProps> = (props) => {
+const _ChatListItemUnreadCount: FC<ChatListItemBoxProps> = (props) => {
   const { unreadCount } = props.chat;
 
   if (unreadCount <= 0) {
@@ -38,7 +38,7 @@ _ChatListItemUnreadCount.displayName = 'ChatListItemUnreadCount';
 
 export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', _ChatListItemUnreadCount);
 
-const _ChatListItemLastMessage: FC<ChatListItemProps> = (props) => {
+const _ChatListItemLastMessage: FC<ChatListItemBoxProps> = (props) => {
   return (
     <div className="wxchtf-chat-last">
       <ChatListItemLastMessageAuthor {...props} />
@@ -51,7 +51,7 @@ _ChatListItemLastMessage.displayName = 'ChatListItemLastMessage';
 
 export const ChatListItemLastMessage = customize('ChatListItemLastMessage', _ChatListItemLastMessage);
 
-export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemProps>, string>(
+export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemBoxProps>, string>(
   'ChatListItemLastMessageAuthor',
   (props) => {
     const { message } = props.chat;
@@ -68,7 +68,7 @@ export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemProps>, st
   },
 );
 
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemProps>, string>(
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>, string>(
   'ChatListItemLastMessageContent',
   (props) => {
     const { message } = props.chat;
@@ -84,7 +84,7 @@ export const ChatListItemLastMessageContent = customize<FC<ChatListItemProps>, s
   },
 );
 
-const _ChatListItem: FC<ChatListItemProps> = (props) => {
+const _ChatListItemBox: FC<ChatListItemBoxProps> = (props) => {
   const { message } = props.chat;
 
   return (
@@ -96,6 +96,6 @@ const _ChatListItem: FC<ChatListItemProps> = (props) => {
   );
 };
 
-_ChatListItem.displayName = 'ChatListItem';
+_ChatListItemBox.displayName = 'ChatListItemBox';
 
-export const ChatListItemView = customize('ChatListItemView', _ChatListItem);
+export const ChatListItemBox = customize('ChatListItemBox', _ChatListItemBox);

package/src/ui/Chatify.tsx

@@ -12,7 +12,7 @@ import { AddChatButton } from './AddChatButton';
 import { Footer } from './Footer';
 import { ChatName } from './ChatName';
 import {
-  ChatListItemView,
+  ChatListItemBox,
   ChatListItemLastMessage,
   ChatListItemLastMessageAuthor,
   ChatListItemLastMessageContent,
@@ -26,12 +26,12 @@ import {
   SendingMessageText,
 } from './SendingMessage';
 import {
-  Message,
   MessageAuthor,
   MessageBody,
   MessageBox,
   MessageInfoBox,
   MessageReadObserver,
+  MessageRow,
   MessageText,
 } from './Message';
 
@@ -43,7 +43,7 @@ export interface ChatifyCustomizeValue {
   ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
   ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
   ChatName?: typeof ChatName.Component | null;
-  ChatListItem?: typeof ChatListItemView.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
   ChatListItemName?: typeof ChatListItemName.Component | null;
   ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
   ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
@@ -53,9 +53,9 @@ export interface ChatifyCustomizeValue {
   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;
+  MessageReadObserver?: typeof MessageReadObserver.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
   MessageBody?: typeof MessageBody.Component | null;
   MessageInfoBox?: typeof MessageInfoBox.Component | null;
   MessageText?: typeof MessageText.Component | null;

package/src/ui/Message.tsx

@@ -1,19 +1,19 @@
 import { useMe } from '../ChatifyContext';
 import { FC, Ref, RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelect, Message as MessageModel } from '../core';
+import { Message, useDispatch, useSelect } from '../core';
 import { customize } from '../util';
 import { useLocalizer } from './localizer';
 import { Avatar } from './Avatar';
 
-export interface MessageProps {
-  message: MessageModel;
+export interface MessageBoxProps {
+  message: Message;
 }
 
-export interface MessageBoxProps extends MessageProps {
+export interface MessageRowProps extends MessageBoxProps {
   containerRef?: Ref<HTMLDivElement>;
 }
 
-export const MessageAuthor = customize<FC<MessageProps>, string>('MessageAuthor', (props) => {
+export const MessageAuthor = customize<FC<MessageBoxProps>, string>('MessageAuthor', (props) => {
   const { sentBy } = props.message;
 
   return (
@@ -23,12 +23,12 @@ export const MessageAuthor = customize<FC<MessageProps>, string>('MessageAuthor'
   );
 });
 
-export const MessageText = customize<FC<MessageProps>, string>('MessageText', (props) => {
+export const MessageText = customize<FC<MessageBoxProps>, string>('MessageText', (props) => {
   const { text } = props.message;
   return <div className="wxchtf-message-text">{text}</div>;
 });
 
-export const MessageInfoBox = customize<FC<MessageProps>, string>('MessageInfoBox', (props) => {
+export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInfoBox', (props) => {
   const { message } = props;
   const { id, sentBy, sentAt, read } = message;
   const me = useMe();
@@ -48,7 +48,7 @@ export const MessageInfoBox = customize<FC<MessageProps>, string>('MessageInfoBo
   );
 });
 
-export const MessageBody = customize<FC<MessageProps>, string>('MessageBody', (props) => {
+export const MessageBody = customize<FC<MessageBoxProps>, string>('MessageBody', (props) => {
   return (
     <div className="wxchtf-message-body">
       <MessageText {...props} />
@@ -57,7 +57,7 @@ export const MessageBody = customize<FC<MessageProps>, string>('MessageBody', (p
   );
 });
 
-export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
+export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (props) => {
   const { message, containerRef } = props;
   const { sentBy } = message;
   const me = useMe();
@@ -71,20 +71,21 @@ export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (
   );
 });
 
-export const Message = customize<FC<MessageProps>, string>('Message', (props) => {
+export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   return (
     <>
       <MessageReadObserver messageRef={ref} {...props} />
-      <MessageBox containerRef={ref} {...props} />
+      <MessageRow containerRef={ref} {...props} />
     </>
   );
 });
 
-export interface MessageReadObserverProps extends MessageProps {
+export interface MessageReadObserverProps extends MessageBoxProps {
   messageRef: RefObject<HTMLDivElement | null>;
 }
+
 export const MessageReadObserver = customize<FC<MessageReadObserverProps>, string>(
   'MessageReadObserver',
   (props) => {

package/src/ui/index.ts

@@ -6,3 +6,5 @@ export * from './Header';
 export * from './ChatHeader';
 export * from './ChatHeaderMembers';
 export * from './ChatListItem';
+export * from './Message';
+export * from './SystemMessage';