@webinex/chatify 1.0.3-rc3 → 2.0.0-build1

package/src/ui/Thread/ThreadContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface ThreadContextValue {
+  id: string;
+  watch: boolean;
+  onWatch: (value: boolean) => void;
+}
+
+export const ThreadContext = React.createContext<ThreadContextValue>(null!);
+
+export function useThreadContext() {
+  return React.useContext(ThreadContext);
+}

package/src/ui/Thread/ThreadPanel.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  MessageBody,
+  chatifyApi,
+  parseThreadMessageId,
+  useFetchNextThreadMessageListMutation,
+  useGetThreadMessageListQuery,
+  useGetThreadMessageReadQueueQuery,
+  useGetThreadQuery,
+  useReadThreadMessageMutation,
+  useSendThreadMessageMutation,
+  useWatchThreadMutation,
+} from '../../core';
+import { Conversation, ConversationCustomizeValue, ConversationProps } from '../Conversation';
+import { ThreadContext, ThreadContextValue } from './ThreadContext';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CustomizeContext } from '../customize';
+import { ThreadActions } from './ThreadActions';
+import { CommonCustomizeValue } from '../common';
+
+export interface ThreadCustomizeValue extends ConversationCustomizeValue, CommonCustomizeValue {
+  ThreadActions?: typeof ThreadActions.Component | null;
+}
+
+export interface ThreadPanelProps {
+  threadId: string;
+  className?: string;
+  customize?: ThreadCustomizeValue;
+  localizer?: Localizer;
+}
+
+function usePanelState(props: ThreadPanelProps) {
+  const { threadId } = props;
+  const { data: thread } = useGetThreadQuery({ id: threadId });
+  const { data: messageList } = useGetThreadMessageListQuery({ threadId });
+  const { id, name, archive, lastReadMessageId, watch } = thread ?? {};
+  const { messages, hasMore } = messageList ?? {};
+
+  const [read] = useReadThreadMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = useFetchNextThreadMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ threadId }), [fetchNext, threadId]);
+
+  const [send] = useSendThreadMessageMutation();
+  const onSend = useCallback(
+    (message: MessageBody) => send({ body: message, threadId }).unwrap(),
+    [threadId, send],
+  );
+
+  const { data: readQueue } = useGetThreadMessageReadQueueQuery();
+
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+
+    const result: ConversationProps = {
+      value: { id: id!, name: name!, active: !archive, lastReadMessageId: lastReadMessageId ?? null },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      noReadTracking: !watch,
+      isReading: (id: string) =>
+        readQueue!.some(
+          (unit) => parseThreadMessageId(unit.value)[0] === parseThreadMessageId(id)[0] && id <= unit.value,
+        ),
+    };
+
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    archive,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+    watch,
+  ]);
+
+  const [watchThread] = useWatchThreadMutation();
+
+  const threadContext = useMemo<ThreadContextValue | null>(
+    () =>
+      thread
+        ? {
+            id: thread.id,
+            watch: thread.watch,
+            onWatch: (value) => watchThread({ id: thread.id, watch: value }).unwrap(),
+          }
+        : null,
+    [thread, watchThread],
+  );
+
+  return [conversation, threadContext] as const;
+}
+
+const DEFAULT_CUSTOMIZE: ThreadCustomizeValue = {
+  ConversationActions: () => <ThreadActions />,
+};
+
+export function ThreadPanel(props: ThreadPanelProps) {
+  const { threadId, customize, localizer = defaultLocalizer, className = '' } = props;
+  const [conversation, threadContext] = usePanelState(props);
+  const customizeMergeValue = useMemo(() => ({ ...DEFAULT_CUSTOMIZE, ...customize }), [customize]);
+
+  useEffect(() => {
+    chatifyApi.settings.client.connectToThread(threadId);
+
+    return () => {
+      chatifyApi.settings.client.disconnectFromThread(threadId);
+    };
+  }, [threadId]);
+
+  if (!conversation || !threadContext) {
+    return null;
+  }
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <ThreadContext.Provider value={threadContext}>
+        <CustomizeContext.Provider value={customizeMergeValue as any}>
+          <div className={`wxchtf-chatify wxchtf-thread ${className}`}>
+            {conversation && <Conversation {...conversation} />}
+          </div>
+        </CustomizeContext.Provider>
+      </ThreadContext.Provider>
+    </LocalizerContext.Provider>
+  );
+}

package/src/ui/Thread/index.tsx

@@ -0,0 +1,3 @@
+export * from './ThreadActions';
+export * from './ThreadPanel';
+export * from './ThreadContext';

package/src/ui/color.ts

@@ -0,0 +1,20 @@
+interface ColorOptions {
+  saturation?: number;
+  lightness?: number;
+}
+
+const DEFAULT_COLOR_OPTIONS: ColorOptions = {
+  saturation: 100,
+  lightness: 75,
+};
+
+export function color(value: string, options: ColorOptions = {}) {
+  options = Object.assign({}, DEFAULT_COLOR_OPTIONS, options);
+
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+  return `hsl(${hash % 360}, ${options.saturation}%, ${options.lightness}%)`;
+}

package/src/ui/common/Avatar.tsx

@@ -0,0 +1,20 @@
+import { FC, ForwardedRef, forwardRef } from 'react';
+import { Account } from '../../core';
+import { Avatar as AntdAvatar } from 'antd';
+import { customize } from '../customize';
+
+export interface AvatarProps {
+  account: Account;
+}
+
+const _Avatar: FC<AvatarProps> = forwardRef(
+  (props: AvatarProps, forwardRef: ForwardedRef<HTMLSpanElement>) => {
+    const { account } = props;
+
+    return <AntdAvatar ref={forwardRef} src={account.avatar} />;
+  },
+);
+
+_Avatar.displayName = 'Avatar';
+
+export const Avatar = customize('Avatar', _Avatar);

package/src/ui/{Icon.tsx → common/Icon.tsx}

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { customize } from './customize';
+import { customize } from '../customize';
 import SendOutlined from '@ant-design/icons/SendOutlined';
 import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
 import UserAddOutlined from '@ant-design/icons/UserAddOutlined';
@@ -9,6 +9,8 @@ import UsergroupDeleteOutlined from '@ant-design/icons/UsergroupDeleteOutlined';
 import TeamOutlined from '@ant-design/icons/TeamOutlined';
 import EditOutlined from '@ant-design/icons/EditOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
+import EyeOutlined from '@ant-design/icons/EyeOutlined';
 
 export type IconType = keyof typeof ICONS;
 
@@ -26,6 +28,9 @@ export const ICONS = {
   members: TeamOutlined,
   edit: EditOutlined,
   close: CloseOutlined,
+  chat: TeamOutlined,
+  watch: EyeOutlined,
+  unwatch: EyeInvisibleOutlined,
 };
 
 export const Icon = customize<FC<IconProps>>('Icon', (props) => {

package/src/ui/{MessageSkeleton.tsx → common/MessageSkeleton.tsx}

@@ -1,10 +1,11 @@
 import { Skeleton } from 'antd';
+import { customize } from '../customize';
 
 export interface MessageSkeletonProps {
   count?: number;
 }
 
-export function MessageSkeleton(props: MessageSkeletonProps) {
+export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
   const { count = 1 } = props;
   return (
     <>
@@ -16,4 +17,4 @@ export function MessageSkeleton(props: MessageSkeletonProps) {
       ))}
     </>
   );
-}
+});

package/src/ui/common/index.ts

@@ -0,0 +1,13 @@
+import { Avatar } from './Avatar';
+import { Icon } from './Icon';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export * from './Avatar';
+export * from './Icon';
+export * from './MessageSkeleton';
+
+export interface CommonCustomizeValue {
+  Avatar?: typeof Avatar.Component | null;
+  Icon?: typeof Icon.Component | null;
+  MessageSkeleton?: typeof MessageSkeleton.Component | null;
+}

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,16 +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;
   dateTime: (value: string) => string;
-  system: {
-    chatCreated: () => string;
-    memberAdded: () => string;
-    memberRemoved: () => string;
-    chatNameChanged: (newName: string) => string;
-  };
+  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
   message: {
     read: () => React.ReactNode;
     reading: () => React.ReactNode;
@@ -68,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,151 +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;
-    new_chat_close: (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) => Promise<string>, 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[]>;