@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/ui/customize.tsx

@@ -1,23 +1,31 @@
-import React, { FC, PropsWithChildren, useContext } from 'react';
+import React, { FC, useContext } from 'react';
 
 export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
   Component: TComponent;
+  key: string;
 };
 
-const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
+export const CustomizeContext = React.createContext<
+  Record<string, React.ComponentType<any> | null | undefined>
+>(null!);
 
-export interface CustomizeProviderValue {
-  [key: string]: React.ComponentType<any> | null;
-}
-
-export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
-  const { children, value } = props;
-  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
+export function useCustomizeContext() {
+  return useContext(CustomizeContext);
 }
 
 function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
   const value = useContext(CustomizeContext);
-  return value[key] as TComponent | null | undefined;
+  return value ? (value[key] as TComponent | null | undefined) : undefined;
+}
+
+export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
+  const Custom = useCustom<TCustom['Component']>(custom.key);
+
+  if (Custom == null) {
+    return null;
+  }
+
+  return Custom ?? custom.Component;
 }
 
 export function customize<TComponent extends React.ComponentType<any>>(

package/src/ui/index.ts

@@ -1,11 +1,11 @@
+export * from './color';
+export * from './customize';
 export * from './Chatify';
-export * from './Avatar';
 export * from './localizer';
-export * from './AddChatButton';
-export * from './Layout/Header';
-export * from './ChatPanel/ChatHeader';
-export * from './ChatPanel/ChatHeaderMembers';
-export * from './ChatList/ChatListItemBox';
-export * from './Message/MessageBox';
-export * from './SystemMessage/SystemMessageBox';
-export * from './Icon';
+export * from './Chat';
+export * from './ChatGroup';
+export * from './Conversation';
+export * from './Thread';
+export * from './common/Icon';
+export * from './common/Avatar';
+export * from './common/MessageSkeleton';

package/src/ui/localizer.tsx

@@ -1,14 +1,12 @@
 import dayjs from 'dayjs';
 import React, { useContext } from 'react';
+import { SystemMessageText } from '../core';
 
 export interface Localizer {
+  isToday: (value: string) => boolean;
   timestamp: (value: string) => string;
-  system: {
-    chatCreated: () => string;
-    memberAdded: () => string;
-    memberRemoved: () => string;
-    chatNameChanged: (newName: string) => string;
-  };
+  dateTime: (value: string) => string;
+  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
   message: {
     read: () => React.ReactNode;
     reading: () => React.ReactNode;
@@ -44,7 +42,9 @@ export function useLocalizer() {
 }
 
 export const defaultLocalizer: Localizer = {
+  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
   timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
   message: {
     read: () => 'Read',
     reading: () => 'Reading...',
@@ -64,10 +64,11 @@ export const defaultLocalizer: Localizer = {
     submitBtn: () => 'Submit',
   },
   system: {
-    chatCreated: () => 'Chat created',
-    memberAdded: () => 'New member added',
-    memberRemoved: () => 'Member removed',
-    chatNameChanged: (newName: string) => `Chat name changed to '${newName}'`,
+    'chatify://chat-created': () => 'Chat created',
+    'chatify://member-added': () => 'New member added',
+    'chatify://member-removed': () => 'Member removed',
+    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
+      `Chat name changed to '${newName}'`,
   },
 
   input: {

package/dist/esm/types/ChatifyContext.d.ts

@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { ChatifyClient } from './core/client';
-export declare function useClient(): ChatifyClient;
-export declare function useMe(): string;
-export interface ChatifyContextValue {
-    me: string;
-    client: ChatifyClient;
-}
-export declare function ChatifyContext({ value, children }: PropsWithChildren<{
-    value: ChatifyContextValue;
-}>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,150 +0,0 @@
-import type { State } from './state';
-import { Account, Chat, ChatListItem, Message, ReadEvent, File } from './models';
-export declare const ACTIONS: {
-    update: (state: State, { mutation }: {
-        mutation: (state: State) => State;
-    }) => void;
-    messages_fetch: (state: State, { chatId, requestId }: {
-        chatId: string;
-        requestId: string;
-    }) => void;
-    messages_fulfilled: (state: State, { chatId, messages, hasMore }: {
-        chatId: string;
-        messages: Message[];
-        hasMore: boolean;
-    }) => void;
-    messages_rejected: (state: State, { chatId, error }: {
-        chatId: string;
-        error: any;
-    }) => void;
-    fetchNext_fetch: (state: State, { chatId }: {
-        chatId: string;
-    }) => void;
-    fetchNext_fulfilled: (state: State, { chatId, messages, hasMore }: {
-        chatId: string;
-        messages: Message[];
-        hasMore: boolean;
-    }) => void;
-    fetchNext_rejected: (state: State, { chatId, error }: {
-        chatId: string;
-        error: any;
-    }) => void;
-    chatList_fetch: (state: State, { requestId }: {
-        requestId: string;
-    }) => void;
-    chatList_fulfilled: (state: State, { chats }: {
-        chats: ChatListItem[];
-    }) => void;
-    chatList_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    removeMember_fetch: (state: State) => void;
-    removeMember_fulfilled: (state: State) => void;
-    removeMember_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    addMember_fetch: (state: State) => void;
-    addMember_fulfilled: (state: State) => void;
-    addMember_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    updateChatName_fetch: (state: State) => void;
-    updateChatName_fulfilled: (state: State) => void;
-    updateChatName_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    addChat_fetch: (state: State) => void;
-    addChat_fulfilled: (state: State) => void;
-    addChat_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    accounts_fetch: (state: State, { requestId }: {
-        requestId: string;
-    }) => void;
-    accounts_fulfilled: (state: State, { accounts }: {
-        accounts: Account[];
-    }) => void;
-    accounts_rejected: (state: State, { error }: {
-        error: any;
-    }) => void;
-    chat_open: (state: State, { chatId }: {
-        chatId: string;
-    }) => void;
-    new_chat_open: (state: State) => void;
-    toggle_members_view: (state: State) => void;
-    message_received: (state: State, { message, requestId, me }: {
-        message: Message;
-        requestId: string;
-        me: string;
-    }) => void;
-    chat_created: (state: State, { chat }: {
-        chat: ChatListItem;
-        requestId?: string | undefined;
-    }) => void;
-    read: (state: State, { id, timestamp }: {
-        id: string;
-        timestamp: number;
-    }) => void;
-    read_send: (state: State, { id }: {
-        id: string;
-    }) => void;
-    read_reject: (state: State, { id, timestamp }: {
-        id: string;
-        timestamp: number;
-    }) => void;
-    read_received: (state: State, { events }: {
-        events: ReadEvent[];
-    }) => void;
-    member_added: (state: State, { chatId, chatName, account, me, message, withHistory, }: {
-        chatId: string;
-        chatName: string;
-        account: Account;
-        me: string;
-        message: Message;
-        withHistory: boolean;
-    }) => State;
-    member_removed: (state: State, { chatId, accountId, deleteHistory, me, message, }: {
-        chatId: string;
-        accountId: string;
-        deleteHistory: boolean;
-        me: string;
-        message: Message;
-    }) => void;
-    chat_fetch: (state: State, { chatId, requestId }: {
-        chatId: string;
-        requestId: string;
-    }) => void;
-    chat_fulfilled: (state: State, { chat }: {
-        chat: Chat;
-    }) => void;
-    chat_rejected: (state: State, { chatId, error }: {
-        chatId: string;
-        error: any;
-    }) => void;
-    send_fetch: (state: State, { chatId, text, files, requestId, }: {
-        chatId: string;
-        text: string;
-        files: File[];
-        requestId: string;
-    }) => void;
-    send_fulfilled: (state: State, { chatId, requestId }: {
-        chatId: string;
-        requestId: string;
-    }) => void;
-    send_rejected: (state: State, { chatId, requestId, error }: {
-        chatId: string;
-        requestId: string;
-        error: any;
-    }) => void;
-    chatNameChanged_received: (state: State, { chatId, newName, message }: {
-        chatId: string;
-        newName: string;
-        message: Message;
-    }) => void;
-};
-export type Action = {
-    [K in keyof typeof ACTIONS]: {
-        type: K;
-        data: Parameters<(typeof ACTIONS)[K]>[1];
-    };
-}[keyof typeof ACTIONS];

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

@@ -1,70 +0,0 @@
-export interface File {
-    name: string;
-    bytes: number;
-    ref: string;
-}
-export interface Account {
-    id: string;
-    name: string;
-    avatar: string;
-}
-export interface Message {
-    id: string;
-    chatId: string;
-    text: string;
-    files: File[];
-    sentAt: string;
-    sentBy: Account;
-    requestId?: string;
-}
-export interface Chat {
-    id: string;
-    name: string;
-    members: Account[];
-}
-export interface ChatListItem {
-    id: string;
-    name: string;
-    message: Message;
-    totalUnreadCount: number;
-    active: boolean;
-    lastReadMessageId: string | null;
-}
-export interface SendMessageRequest {
-    chatId: string;
-    text: string;
-    files: File[];
-    requestId: string;
-}
-export interface MessageBody {
-    text: string;
-    files: File[];
-}
-export interface AddChatRequest {
-    requestId: string;
-    name: string;
-    message?: MessageBody;
-    members: string[];
-}
-export interface ReadRequest {
-    id: string;
-}
-export interface ReadEvent {
-    chatId: string;
-    newLastReadMessageId: string;
-    readCount: number;
-}
-export interface RemoveMemberRequest {
-    chatId: string;
-    accountId: string;
-    deleteHistory: boolean;
-}
-export interface AddMemberRequest {
-    chatId: string;
-    accountId: string;
-    withHistory: boolean;
-}
-export interface UpdateChatNameRequest {
-    id: string;
-    name: string;
-}

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

@@ -1,11 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { Action } from './action';
-import { State } from './state';
-export type Reducer = ReturnType<typeof useReducer>;
-type Subscriber = (state: State) => void;
-export declare function useReducer(): readonly [React.MutableRefObject<State>, (action: Action) => void, (subscriber: Subscriber) => () => void];
-export declare function ReducerProvider({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
-export declare function useDispatch(): (action: Action) => void;
-export declare function useStateRef(): React.MutableRefObject<State>;
-export declare function useSelect<TResult>(select: (state: State) => TResult, deps: any[]): TResult;
-export {};

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

@@ -1,55 +0,0 @@
-import { Account, Chat, ChatListItem, Message, SendMessageRequest, File } from './models';
-export type MessageState = ({
-    type: 'message';
-} & Message) | {
-    type: 'next';
-} | {
-    type: 'sending';
-    text: string;
-    files: File[];
-    requestId: string;
-};
-export interface UIState {
-    view?: 'chat' | 'new-chat';
-    showMembers: boolean;
-    chatId?: string;
-}
-export interface QueryState<TData> {
-    uninitialized: boolean;
-    isFetching: boolean;
-    error?: any;
-    data?: TData;
-    requestId?: string;
-}
-export interface MutationState {
-    isFetching: boolean;
-    error?: any;
-}
-export interface QueueState<TValue> {
-    queued: TValue[];
-    processing: TValue[];
-    timestamp: number;
-}
-export interface State {
-    ui: UIState;
-    query: {
-        messages: Record<string, QueryState<MessageState[]>>;
-        chats: Record<string, QueryState<Chat>>;
-        chatList: QueryState<ChatListItem[]>;
-        accounts: QueryState<Account[]>;
-    };
-    mutation: {
-        fetchNext: MutationState;
-        removeMember: MutationState;
-        addMember: MutationState;
-        updateChatName: MutationState;
-        addChat: MutationState;
-        send: MutationState;
-    };
-    queue: {
-        read: QueueState<string>;
-        send: QueueState<SendMessageRequest>;
-    };
-}
-export declare const FETCH_QUERY_STATE: QueryState<any>;
-export declare const INITIAL_STATE: State;

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

@@ -1,2 +0,0 @@
-import { AddChatRequest } from './models';
-export declare function useAddChatMutation(): readonly [(args: AddChatRequest) => void, import("./state").MutationState];

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

@@ -1,2 +0,0 @@
-import { AddMemberRequest } from './models';
-export declare function useAddMemberMutation(): readonly [(args: AddMemberRequest) => void, import("./state").MutationState];

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

@@ -1,3 +0,0 @@
-export declare function useFetchNextMutation({ chatId }: {
-    chatId: string;
-}): readonly [() => void, import("./state").MutationState];

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

@@ -1,3 +0,0 @@
-import { QueryState } from './state';
-import { Account } from './models';
-export declare function useGetAccountsQuery(): QueryState<Account[]>;

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

@@ -1,3 +0,0 @@
-import { QueryState } from './state';
-import { ChatListItem } from './models';
-export declare function useGetChatListQuery(): QueryState<ChatListItem[]>;

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

@@ -1,5 +0,0 @@
-import { QueryState } from './state';
-import { Chat } from './models';
-export declare function useGetChatQuery(args: {
-    chatId: string;
-}): QueryState<Chat>;

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

@@ -1,4 +0,0 @@
-import { MessageState, QueryState } from './state';
-export declare function useGetMessagesQuery(args: {
-    chatId: string;
-}): QueryState<MessageState[]>;

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

@@ -1 +0,0 @@
-export declare function useReadMonitor(): void;

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

@@ -1,2 +0,0 @@
-import { RemoveMemberRequest } from './models';
-export declare function useRemoveMemberMutation(): readonly [(args: RemoveMemberRequest) => void, import("./state").MutationState];

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

@@ -1,2 +0,0 @@
-import { SendMessageRequest } from './models';
-export declare function useSendMutation(): readonly [(args: SendMessageRequest) => void, import("./state").MutationState];

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

@@ -1,2 +0,0 @@
-import { ChatifyClient } from './client';
-export declare function useSignalRMonitor(me: string, client: ChatifyClient): void;

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

@@ -1,2 +0,0 @@
-import { UpdateChatNameRequest } from './models';
-export declare function useUpdateChatNameMutation(): readonly [(args: UpdateChatNameRequest) => void, import("./state").MutationState];

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const AddChatButton: import("./customize").Customizable<import("react").ComponentType<unknown>>;

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { Account } from '../core';
-export interface AvatarProps {
-    account: Account;
-}
-export declare const Avatar: import("./customize").Customizable<import("react").ComponentType<AvatarProps>>;

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const ChatList: import("../customize").Customizable<import("react").ComponentType<unknown>>;

package/dist/esm/types/ui/ChatList/ChatListItemBox.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ChatListItem as ChatListItemModel } from '../../core';
-export interface ChatListItemBoxProps {
-    chat: ChatListItemModel;
-}
-export declare const ChatListItemBox: import("../customize").Customizable<import("react").ComponentType<ChatListItemBoxProps>>;

package/dist/esm/types/ui/ChatList/ChatListItemLastMessage.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-export declare const ChatListItemLastMessage: import("../customize").Customizable<import("react").ComponentType<ChatListItemBoxProps>>;

package/dist/esm/types/ui/ChatList/ChatListItemLastMessageAuthor.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-export declare const ChatListItemLastMessageAuthor: import("../customize").Customizable<import("react").ComponentType<ChatListItemBoxProps>>;

package/dist/esm/types/ui/ChatList/ChatListItemName.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-export declare const ChatListItemName: import("../customize").Customizable<import("react").ComponentType<ChatListItemBoxProps>>;

package/dist/esm/types/ui/ChatList/ChatListItemUnreadCount.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ChatListItemBoxProps } from './ChatListItemBox';
-export declare const ChatListItemUnreadCount: import("../customize").Customizable<import("react").ComponentType<ChatListItemBoxProps>>;

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

@@ -1,7 +0,0 @@
-export * from './ChatList';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatNameProps {
-    name: string;
-}
-export declare const ChatName: import("./customize").Customizable<import("react").ComponentType<ChatNameProps>>;

package/dist/esm/types/ui/ChatPanel/ChatBody.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatBodyProps {
-    id: string;
-}
-export declare const ChatBody: import("../customize").Customizable<import("react").ComponentType<ChatBodyProps>>;

package/dist/esm/types/ui/ChatPanel/ChatHeader.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatHeaderProps {
-    id: string;
-}
-export declare const ChatHeader: import("../customize").Customizable<import("react").ComponentType<ChatHeaderProps>>;

package/dist/esm/types/ui/ChatPanel/ChatHeaderMembers.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatHeaderMembersProps {
-    id: string;
-}
-export declare const ChatHeaderMembers: import("../customize").Customizable<import("react").ComponentType<ChatHeaderMembersProps>>;

package/dist/esm/types/ui/ChatPanel/ChatHeaderName.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatHeaderNameProps {
-    id: string;
-}
-export declare const ChatHeaderName: import("../customize").Customizable<import("react").ComponentType<ChatHeaderNameProps>>;

package/dist/esm/types/ui/ChatPanel/ChatMembersButton.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatMembersButtonProps {
-    id: string;
-}
-export declare const ChatMembersButton: import("../customize").Customizable<import("react").ComponentType<ChatMembersButtonProps>>;

package/dist/esm/types/ui/ChatPanel/ChatMembersPanel.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatMembersPanelProps {
-    id: string;
-}
-export declare const ChatMembersPanel: import("../customize").Customizable<import("react").ComponentType<ChatMembersPanelProps>>;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface ChatPanelProps {
-    id: string;
-}
-export declare const ChatPanel: import("../customize").Customizable<import("react").ComponentType<ChatPanelProps>>;

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

@@ -1,6 +0,0 @@
-export * from './ChatBody';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatHeaderName';
-export * from './ChatPanel';
-export * from './ChatMembersButton';

package/dist/esm/types/ui/CreateChatPanel/CreateChatMemberInput.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface CreateChatMemberInputProps {
-    name: string;
-}
-export declare const CreateChatMemberInput: import("../customize").Customizable<import("react").ComponentType<CreateChatMemberInputProps>>;

package/dist/esm/types/ui/CreateChatPanel/CreateChatNameInput.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface CreateChatNameInputProps {
-    name: string;
-}
-export declare const CreateChatNameInput: import("../customize").Customizable<import("react").ComponentType<CreateChatNameInputProps>>;

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const CreateChatPanel: import("../customize").Customizable<import("react").ComponentType<unknown>>;

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

@@ -1,4 +0,0 @@
-export * from './CreateChatForm';
-export * from './CreateChatMemberInput';
-export * from './CreateChatNameInput';
-export * from './CreateChatPanel';