@webinex/chatify 1.0.0-alpha06 → 1.0.0-alpha08

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,32 @@ 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;
+    };
+    input: {
+        placeholder: () => string;
     };
 }
-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 +49,7 @@ interface Account {
     name: string;
     avatar: string;
 }
-interface Message$1 {
+interface Message {
     id: string;
     chatId: string;
     text: string;
@@ -63,7 +67,7 @@ interface Chat {
 interface ChatListItem {
     id: string;
     name: string;
-    message: Message$1;
+    message: Message;
     unreadCount: number;
 }
 interface SendMessageRequest {
@@ -127,7 +131,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 +196,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 +237,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 +255,7 @@ declare function useLoadMore({ chatId }: {
 
 type MessageState = ({
     type: 'message';
-} & Message$1) | {
+} & Message) | {
     type: 'more';
 } | {
     type: 'sending';
@@ -320,23 +324,30 @@ 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>;
 
+type IconType = 'attach' | 'send';
+interface IconProps {
+    type: IconType;
+}
+declare const ICONS: Record<IconType, React.ComponentType>;
+declare const Icon: Customizable<FC<IconProps>, string>;
+
 interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -355,13 +366,14 @@ 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;
     MessageAuthor?: typeof MessageAuthor.Component | null;
+    Icon?: typeof Icon.Component | null;
 }
 interface ChatifyProps {
     className?: string;
@@ -376,6 +388,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 +405,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, ICONS, Icon, IconProps, IconType, 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-alpha08",
   "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,14 +26,15 @@ import {
   SendingMessageText,
 } from './SendingMessage';
 import {
-  Message,
   MessageAuthor,
   MessageBody,
   MessageBox,
   MessageInfoBox,
   MessageReadObserver,
+  MessageRow,
   MessageText,
 } from './Message';
+import { Icon } from './Icon';
 
 export interface ChatifyCustomizeValue {
   Avatar?: typeof Avatar.Component | null;
@@ -53,13 +54,14 @@ 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;
   MessageAuthor?: typeof MessageAuthor.Component | null;
+  Icon?: typeof Icon.Component | null;
 }
 
 export interface ChatifyProps {

package/src/ui/Icon.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { customize } from '../util';
+import SendOutlined from '@ant-design/icons/SendOutlined';
+import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
+
+export type IconType = 'attach' | 'send';
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS: Record<IconType, React.ComponentType> = {
+  attach: FileAddOutlined,
+  send: SendOutlined,
+};
+
+export const Icon = customize<FC<IconProps>, string>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/InputForm.tsx

@@ -1,16 +1,19 @@
 import { Button, Input } from 'antd';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
 import { useCallback, useState } from 'react';
 import isHotkey from 'is-hotkey';
 import { useAddMessage } from '../core/useAddMessage';
 import { uniqId } from '../util';
 import { useSelect } from '../core';
+import { useLocalizer } from './localizer';
+import { Icon } from './Icon';
+
+const isSend = isHotkey('ctrl+enter');
 
 export function InputForm() {
   const chatId = useSelect((x) => x.ui.chatId!, []);
   const [add] = useAddMessage({ chatId });
   const [text, setText] = useState('');
+  const localizer = useLocalizer();
 
   const onSend = useCallback(() => {
     setText('');
@@ -23,7 +26,7 @@ export function InputForm() {
     <div className="wxchtf-input-form">
       <div className="wxchtf-input-box">
         <div className="wxchtf-add-files-box">
-          <Button type="link" icon={<FileAddOutlined />} className="wxchtf-add-files-btn" />
+          <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
         </div>
         <div className="wxchtf-text-input-box">
           <Input.TextArea
@@ -31,16 +34,16 @@ export function InputForm() {
             onChange={(e) => setText(e.target.value)}
             autoSize={{ maxRows: 5 }}
             className="wxchtf-text-input-textarea"
-            placeholder="Start typing (Ctrl/⌘Cmd + Enter to send) ..."
+            placeholder={localizer.input.placeholder()}
             onKeyDown={(event) => {
-              if (isHotkey('ctrl+enter')(event)) {
+              if (isSend(event)) {
                 onSend();
               }
             }}
           />
         </div>
         <div className="wxchtf-submit-btn-box">
-          <Button onClick={onSend} type="link" icon={<SendOutlined />} className="wxchtf-submit-btn" />
+          <Button onClick={onSend} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
         </div>
       </div>
     </div>

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,6 @@ export * from './Header';
 export * from './ChatHeader';
 export * from './ChatHeaderMembers';
 export * from './ChatListItem';
+export * from './Message';
+export * from './SystemMessage';
+export * from './Icon';

package/src/ui/localizer.tsx

@@ -24,6 +24,10 @@ export interface Localizer {
     };
     submitBtn: () => React.ReactNode;
   };
+
+  input: {
+    placeholder: () => string;
+  };
 }
 
 export const LocalizerContext = React.createContext<Localizer>(null!);
@@ -55,4 +59,8 @@ export const defaultLocalizer: Localizer = {
   system: {
     chatCreated: () => 'Chat created',
   },
+
+  input: {
+    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
+  },
 };

package/src/ui/styles/index.scss

@@ -69,10 +69,6 @@
         width: 100%;
         align-items: flex-end;
 
-        &.--sending {
-          animation: fadeInFromNone 0.5s ease-out;
-        }
-
         &.--my {
           direction: rtl;
           justify-content: flex-start;