@webinex/chatify 1.0.0-alpha08 → 1.0.0-build2

package/dist/esm/types/core/models.d.ts

@@ -35,14 +35,14 @@ export interface SendMessageRequest {
     files: File[];
     requestId: string;
 }
-export interface MessageContent {
+export interface MessageBody {
     text: string;
     files: File[];
 }
 export interface AddChatRequest {
     requestId: string;
     name: string;
-    message?: MessageContent;
+    message?: MessageBody;
     members: string[];
 }
 export interface ReadRequest {

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

@@ -8,9 +8,10 @@ import { AddChatButton } from './AddChatButton';
 import { Footer } from './Footer';
 import { ChatName } from './ChatName';
 import { ChatListItemBox, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount } from './ChatListItem';
-import { SendingMessage, SendingMessageBody, SendingMessageInfoBox, SendingMessageText } from './SendingMessage';
-import { MessageAuthor, MessageBody, MessageBox, MessageInfoBox, MessageReadObserver, MessageRow, MessageText } from './Message';
+import { SendingMessage, SendingMessageContent, SendingMessageInfoBox, SendingMessageText } from './SendingMessage';
+import { MessageAuthor, MessageContent, MessageBox, MessageInfoBox, MessageReadObserver, MessageRow, MessageText } from './Message';
 import { Icon } from './Icon';
+import { SystemMessage } from './SystemMessage';
 export interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -25,14 +26,15 @@ export interface ChatifyCustomizeValue {
     ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
     ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
     ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+    SystemMessage?: typeof SystemMessage.Component | null;
     SendingMessage?: typeof SendingMessage.Component | null;
-    SendingMessageBody?: typeof SendingMessageBody.Component | null;
+    SendingMessageBody?: typeof SendingMessageContent.Component | null;
     SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
     SendingMessageText?: typeof SendingMessageText.Component | null;
     MessageBox?: typeof MessageBox.Component | null;
     MessageReadObserver?: typeof MessageReadObserver.Component | null;
     MessageRow?: typeof MessageRow.Component | null;
-    MessageBody?: typeof MessageBody.Component | null;
+    MessageContent?: typeof MessageContent.Component | null;
     MessageInfoBox?: typeof MessageInfoBox.Component | null;
     MessageText?: typeof MessageText.Component | null;
     MessageAuthor?: typeof MessageAuthor.Component | null;

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

@@ -9,7 +9,7 @@ export interface MessageRowProps extends MessageBoxProps {
 export declare const MessageAuthor: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageText: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageInfoBox: import("../util").Customizable<FC<MessageBoxProps>, string>;
-export declare const MessageBody: import("../util").Customizable<FC<MessageBoxProps>, string>;
+export declare const MessageContent: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageRow: import("../util").Customizable<FC<MessageRowProps>, string>;
 export declare const MessageBox: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export interface MessageReadObserverProps extends MessageBoxProps {

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

@@ -6,5 +6,5 @@ export interface SendingMessageProps {
 }
 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 SendingMessageContent: import("../util").Customizable<FC<SendingMessageProps>, string>;
 export declare const SendingMessage: import("../util").Customizable<FC<SendingMessageProps>, string>;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { FC } from 'react';
 import { Localizer } from './localizer';
 export interface SystemMessageProps {
     text: string;
     sentAt: string;
 }
 export declare function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode;
-export declare function SystemMessage(props: SystemMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare const SystemMessage: import("../util").Customizable<FC<SystemMessageProps>, string>;

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

@@ -3,6 +3,7 @@ export interface Localizer {
     timestamp: (value: string) => string;
     system: {
         chatCreated: () => string;
+        memberAdded: () => string;
     };
     message: {
         read: () => React.ReactNode;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <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';
@@ -7,6 +6,7 @@ interface Localizer {
     timestamp: (value: string) => string;
     system: {
         chatCreated: () => string;
+        memberAdded: () => string;
     };
     message: {
         read: () => React$1.ReactNode;
@@ -76,14 +76,14 @@ interface SendMessageRequest {
     files: File[];
     requestId: string;
 }
-interface MessageContent {
+interface MessageBody {
     text: string;
     files: File[];
 }
 interface AddChatRequest {
     requestId: string;
     name: string;
-    message?: MessageContent;
+    message?: MessageBody;
     members: string[];
 }
 interface ReadRequest {
@@ -217,9 +217,12 @@ declare const ACTIONS: {
     read_received: (state: State, { events }: {
         events: ReadEvent[];
     }) => State;
-    member_added: (state: State, { chatId, account }: {
+    member_added: (state: State, { chatId, chatName, account, me, message, }: {
         chatId: string;
+        chatName: string;
         account: Account;
+        me: string;
+        message: Message;
     }) => State;
     member_removed: (state: State, { chatId, accountId, deleteHistory, me, }: {
         chatId: string;
@@ -321,7 +324,7 @@ interface SendingMessageProps {
 }
 declare const SendingMessageText: Customizable<FC<SendingMessageProps>, string>;
 declare const SendingMessageInfoBox: Customizable<FC<SendingMessageProps>, string>;
-declare const SendingMessageBody: Customizable<FC<SendingMessageProps>, string>;
+declare const SendingMessageContent: Customizable<FC<SendingMessageProps>, string>;
 declare const SendingMessage: Customizable<FC<SendingMessageProps>, string>;
 
 interface MessageBoxProps {
@@ -333,7 +336,7 @@ interface MessageRowProps extends MessageBoxProps {
 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 MessageContent: Customizable<FC<MessageBoxProps>, string>;
 declare const MessageRow: Customizable<FC<MessageRowProps>, string>;
 declare const MessageBox: Customizable<FC<MessageBoxProps>, string>;
 interface MessageReadObserverProps extends MessageBoxProps {
@@ -348,6 +351,13 @@ interface IconProps {
 declare const ICONS: Record<IconType, React.ComponentType>;
 declare const Icon: Customizable<FC<IconProps>, string>;
 
+interface SystemMessageProps {
+    text: string;
+    sentAt: string;
+}
+declare function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode;
+declare const SystemMessage: Customizable<FC<SystemMessageProps>, string>;
+
 interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -362,14 +372,15 @@ interface ChatifyCustomizeValue {
     ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
     ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
     ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+    SystemMessage?: typeof SystemMessage.Component | null;
     SendingMessage?: typeof SendingMessage.Component | null;
-    SendingMessageBody?: typeof SendingMessageBody.Component | null;
+    SendingMessageBody?: typeof SendingMessageContent.Component | null;
     SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
     SendingMessageText?: typeof SendingMessageText.Component | null;
     MessageBox?: typeof MessageBox.Component | null;
     MessageReadObserver?: typeof MessageReadObserver.Component | null;
     MessageRow?: typeof MessageRow.Component | null;
-    MessageBody?: typeof MessageBody.Component | null;
+    MessageContent?: typeof MessageContent.Component | null;
     MessageInfoBox?: typeof MessageInfoBox.Component | null;
     MessageText?: typeof MessageText.Component | null;
     MessageAuthor?: typeof MessageAuthor.Component | null;
@@ -388,13 +399,6 @@ 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 {

package/package.json

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

package/src/core/action.tsx

@@ -214,7 +214,16 @@ export const ACTIONS = {
     return state;
   },
 
-  member_added: (state: State, { chatId, account }: { chatId: string; account: Account }): State => {
+  member_added: (
+    state: State,
+    {
+      chatId,
+      chatName,
+      account,
+      me,
+      message,
+    }: { chatId: string; chatName: string; account: Account; me: string; message: Message },
+  ): State => {
     state = {
       ...state,
       query: {
@@ -230,6 +239,34 @@ export const ACTIONS = {
       state.query['chat.' + chatId].data.members = [...state.query['chat.' + chatId].data.members, account];
     }
 
+    if (state.query['messages.' + chatId]?.data !== undefined) {
+      state.query['messages.' + chatId] = {
+        ...state.query['messages.' + chatId],
+        data: [{ type: 'message', ...message }, ...state.query['messages.' + chatId].data],
+      };
+    }
+
+    if (account.id !== me && state.query['chat-list'].data !== undefined) {
+      state.query['chat-list'] = { ...state.query['chat-list'] };
+      state.query['chat-list'].data = state.query['chat-list'].data.map((x: ChatListItem) =>
+        x.id === chatId ? { ...x, message: { ...message } } : x,
+      );
+    }
+
+    if (account.id === me && state.query['chat-list'].data !== undefined) {
+      const listItem: ChatListItem = {
+        id: chatId,
+        name: chatName,
+        message: { ...message },
+        unreadCount: 0,
+      };
+
+      state.query['chat-list'] = {
+        ...state.query['chat-list'],
+        data: [...state.query['chat-list'].data, listItem],
+      };
+    }
+
     return state;
   },
 

package/src/core/models.tsx

@@ -41,7 +41,7 @@ export interface SendMessageRequest {
   requestId: string;
 }
 
-export interface MessageContent {
+export interface MessageBody {
   text: string;
   files: File[];
 }
@@ -49,7 +49,7 @@ export interface MessageContent {
 export interface AddChatRequest {
   requestId: string;
   name: string;
-  message?: MessageContent;
+  message?: MessageBody;
   members: string[];
 }
 

package/src/core/useSignalRMonitor.tsx

@@ -26,9 +26,12 @@ export function useSignalRMonitor(me: string, client: ChatifyClient) {
         }),
       );
       unsubscribes.push(
-        client.subscribe('chatify://member-added', ([chatId, account]: [string, Account]) => {
-          dispatch({ type: 'member_added', data: { chatId, account } });
-        }),
+        client.subscribe(
+          'chatify://member-added',
+          ([chatId, chatName, account, message]: [string, string, Account, Message]) => {
+            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
+          },
+        ),
       );
       unsubscribes.push(
         client.subscribe(

package/src/ui/ChatSettings.tsx

@@ -9,7 +9,7 @@ function Member(props: { account: Account; chatId: string }) {
   const [remove] = useRemoveMember();
 
   const onRemoveClick = useCallback(
-    () => remove({ chatId, accountId: account.id, deleteHistory: true }),
+    () => remove({ chatId, accountId: account.id, deleteHistory: false }),
     [remove, chatId, account.id],
   );
 

package/src/ui/Chatify.tsx

@@ -21,13 +21,13 @@ import {
 } from './ChatListItem';
 import {
   SendingMessage,
-  SendingMessageBody,
+  SendingMessageContent,
   SendingMessageInfoBox,
   SendingMessageText,
 } from './SendingMessage';
 import {
   MessageAuthor,
-  MessageBody,
+  MessageContent,
   MessageBox,
   MessageInfoBox,
   MessageReadObserver,
@@ -35,6 +35,7 @@ import {
   MessageText,
 } from './Message';
 import { Icon } from './Icon';
+import { SystemMessage } from './SystemMessage';
 
 export interface ChatifyCustomizeValue {
   Avatar?: typeof Avatar.Component | null;
@@ -50,14 +51,15 @@ export interface ChatifyCustomizeValue {
   ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
   ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
   ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  SystemMessage?: typeof SystemMessage.Component | null;
   SendingMessage?: typeof SendingMessage.Component | null;
-  SendingMessageBody?: typeof SendingMessageBody.Component | null;
+  SendingMessageBody?: typeof SendingMessageContent.Component | null;
   SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
   SendingMessageText?: typeof SendingMessageText.Component | null;
   MessageBox?: typeof MessageBox.Component | null;
   MessageReadObserver?: typeof MessageReadObserver.Component | null;
   MessageRow?: typeof MessageRow.Component | null;
-  MessageBody?: typeof MessageBody.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
   MessageInfoBox?: typeof MessageInfoBox.Component | null;
   MessageText?: typeof MessageText.Component | null;
   MessageAuthor?: typeof MessageAuthor.Component | null;

package/src/ui/Message.tsx

@@ -48,9 +48,9 @@ export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInf
   );
 });
 
-export const MessageBody = customize<FC<MessageBoxProps>, string>('MessageBody', (props) => {
+export const MessageContent = customize<FC<MessageBoxProps>, string>('MessageContent', (props) => {
   return (
-    <div className="wxchtf-message-body">
+    <div className="wxchtf-message-content">
       <MessageText {...props} />
       <MessageInfoBox {...props} />
     </div>
@@ -66,7 +66,7 @@ export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (
   return (
     <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
       <MessageAuthor {...props} />
-      <MessageBody {...props} />
+      <MessageContent {...props} />
     </div>
   );
 });

package/src/ui/SendingMessage.tsx

@@ -29,11 +29,11 @@ export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
   },
 );
 
-export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageBody',
+export const SendingMessageContent = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageContent',
   (props) => {
     return (
-      <div className="wxchtf-sending-message-body">
+      <div className="wxchtf-sending-message-content">
         <SendingMessageText {...props} />
         <SendingMessageInfoBox {...props} />
       </div>
@@ -44,7 +44,7 @@ export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
 export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
   return (
     <div className="wxchtf-sending-message">
-      <SendingMessageBody {...props} />
+      <SendingMessageContent {...props} />
     </div>
   );
 });

package/src/ui/SystemMessage.tsx

@@ -1,3 +1,5 @@
+import { FC } from 'react';
+import { customize } from '../util';
 import { Localizer, useLocalizer } from './localizer';
 
 export interface SystemMessageProps {
@@ -10,10 +12,14 @@ export function formatSystemMessage(localizer: Localizer, text: string): React.R
     return localizer.system.chatCreated();
   }
 
-  throw new Error(`Unknown system message ${text}`);
+  if (text.startsWith('chatify://member-added::')) {
+    return localizer.system.memberAdded();
+  }
+
+  return text;
 }
 
-export function SystemMessage(props: SystemMessageProps) {
+export const SystemMessage = customize<FC<SystemMessageProps>, string>('SystemMessage', (props) => {
   const { text, sentAt } = props;
   const localizer = useLocalizer();
 
@@ -23,4 +29,4 @@ export function SystemMessage(props: SystemMessageProps) {
       <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
     </div>
   );
-}
+});

package/src/ui/localizer.tsx

@@ -5,6 +5,7 @@ export interface Localizer {
   timestamp: (value: string) => string;
   system: {
     chatCreated: () => string;
+    memberAdded: () => string;
   };
   message: {
     read: () => React.ReactNode;
@@ -58,6 +59,7 @@ export const defaultLocalizer: Localizer = {
   },
   system: {
     chatCreated: () => 'Chat created',
+    memberAdded: () => 'New member added',
   },
 
   input: {

package/src/ui/styles/index.scss

@@ -78,8 +78,8 @@
             margin-left: 15px;
           }
 
-          .wxchtf-message-body,
-          .wxchtf-sending-message-body {
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
             direction: ltr;
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 0;
@@ -96,8 +96,8 @@
           }
         }
 
-        .wxchtf-message-body,
-        .wxchtf-sending-message-body {
+        .wxchtf-message-content,
+        .wxchtf-sending-message-content {
           min-width: 300px;
           max-width: 70%;
           border-radius: $messageBorderRadius;