@webinex/chatify 1.0.0-alpha06 → 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';
@@ -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>;
@@ -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, ChatListItemBox, ChatListItemBoxProps, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount, 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-alpha06",
+  "version": "1.0.0-alpha07",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",

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/Chatify.tsx

@@ -26,12 +26,12 @@ import {
   SendingMessageText,
 } from './SendingMessage';
 import {
-  Message,
   MessageAuthor,
   MessageBody,
   MessageBox,
   MessageInfoBox,
   MessageReadObserver,
+  MessageRow,
   MessageText,
 } from './Message';
 
@@ -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';