@webinex/chatify 1.0.2-rc3 → 2.0.0-alpha1

package/src/ui/{Next.tsx → Conversation/NextObserver/NextMessagesObserver.tsx}

@@ -1,23 +1,22 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFetchNextMutation } from '../core';
-import { MessageSkeleton } from './MessageSkeleton';
+import { MessageSkeleton } from '../../common/MessageSkeleton';
 
-export interface NextProps {
-  chatId: string;
+export interface NextMessagesObserverProps {
+  onLoad: () => void;
+  loading: boolean;
 }
 
-export function Next(props: NextProps) {
-  const { chatId } = props;
-  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
+export function NextMessagesObserver(props: NextMessagesObserverProps) {
+  const { onLoad, loading } = props;
   const [intersecting, setIntersecting] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
-  const timerRef = useRef<NodeJS.Timer>();
+  const timerRef = useRef<number>();
 
   const observer = useMemo(
     () =>
       new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting) {
-          timerRef.current = setTimeout(() => setIntersecting(true), 200);
+          timerRef.current = window.setTimeout(() => setIntersecting(true), 200);
         } else {
           clearTimeout(timerRef.current!);
         }
@@ -35,14 +34,14 @@ export function Next(props: NextProps) {
       return;
     }
 
-    fetchNext();
+    onLoad();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [intersecting]);
 
-  if (isFetching || intersecting) {
+  if (loading || intersecting) {
     return <MessageSkeleton count={4} />;
   }
 
-  return <div className="wxchtf-next" ref={ref}></div>;
+  return <div className="wxchtf-next" ref={ref} />;
 }

package/src/ui/Conversation/NextObserver/index.ts

@@ -0,0 +1 @@
+export * from './NextMessagesObserver';

package/src/ui/{MessageReadObserver.tsx → Conversation/ReadObserver/MessageReadObserver.tsx}

@@ -1,20 +1,14 @@
 import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelect } from '../core';
-import { customize } from './customize';
-import { MessageBoxProps } from './Message/MessageBox';
+import { MessageBoxProps } from '../Message';
+import { useConversation } from '../ConversationContext';
 
 export interface MessageReadObserverProps extends MessageBoxProps {
   messageRef: RefObject<HTMLDivElement | null>;
 }
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
+const Observer: FC<MessageReadObserverProps> = (props) => {
   const { message, messageRef } = props;
-  const dispatch = useDispatch();
-  const isRead = useSelect((x) => {
-    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
-    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
-  }, []);
-
+  const { onRead, lastReadMessageId } = useConversation();
+  const isRead = lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
   const readRef = useRef(isRead);
 
   useEffect(() => {
@@ -26,7 +20,7 @@ export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('Mess
       new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting && !readRef.current) {
           readRef.current = true;
-          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+          onRead(message.id);
         }
       }),
 
@@ -42,4 +36,14 @@ export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('Mess
   }, [observer]);
 
   return <></>;
-});
+};
+
+export function MessageReadObserver(props: MessageReadObserverProps) {
+  const { noReadTracking } = useConversation();
+
+  if (noReadTracking === true) {
+    return null;
+  }
+
+  return <Observer {...props} />;
+}

package/src/ui/Conversation/ReadObserver/index.ts

@@ -0,0 +1 @@
+export * from './MessageReadObserver';

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageBox.tsx

@@ -1,5 +1,5 @@
-import { File } from '../../core';
-import { customize } from '../customize';
+import { File } from '../../../core';
+import { customize } from '../../customize';
 import { SendingMessageContent } from './SendingMessageContent';
 
 export interface SendingMessageBoxProps {

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageContent.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { SendingMessageText } from './SendingMessageText';
 import { SendingMessageInfoBox } from './SendingMessageInfoBox';
 import type { SendingMessageBoxProps } from './SendingMessageBox';

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageInfoBox.tsx

@@ -1,5 +1,5 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
 import type { SendingMessageBoxProps } from './SendingMessageBox';
 
 export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageText.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import type { SendingMessageBoxProps } from './SendingMessageBox';
 
 export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {

package/src/ui/Conversation/SendingMessage/index.ts

@@ -0,0 +1,16 @@
+import { SendingMessageBox } from './SendingMessageBox';
+import { SendingMessageContent } from './SendingMessageContent';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import { SendingMessageText } from './SendingMessageText';
+
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';
+
+export interface SendingMessageCustomizeValue {
+  SendingMessageBox?: typeof SendingMessageBox.Component | null;
+  SendingMessageContent?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+}

package/src/ui/{SystemMessage → Conversation/SystemMessage}/SystemMessageBox.tsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react';
-import { customize } from '../customize';
-import { Message } from '../../core';
-import { MessageReadObserver } from '../MessageReadObserver';
+import { customize } from '../../customize';
+import { MessageBase } from '../../../core';
 import { SystemMessageRow } from './SystemMessageRow';
+import { MessageReadObserver } from '../ReadObserver';
 
 export interface SystemMessageBoxProps {
-  message: Message;
+  message: MessageBase;
 }
 
 export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {

package/src/ui/Conversation/SystemMessage/SystemMessageRow.tsx

@@ -0,0 +1,28 @@
+import { Ref } from 'react';
+import { customize } from '../../customize';
+import { Localizer, useLocalizer } from '../../localizer';
+import { MessageBase } from '../../../core';
+
+export interface SystemMessageRowProps {
+  message: MessageBase;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  const [key, payload] = text.split('::', 2);
+  const data = payload ? JSON.parse(payload) : null;
+  return localizer.system[key as keyof Localizer['system']](key as any, data);
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/Conversation/SystemMessage/index.ts

@@ -0,0 +1,10 @@
+import { SystemMessageBox } from './SystemMessageBox';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';
+
+export interface SystemMessageCustomizeValue {
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+}

package/src/ui/Conversation/index.ts

@@ -0,0 +1,13 @@
+export * from './InputBox';
+export * from './Message';
+export * from './NextObserver';
+export * from './ReadObserver';
+export * from './SendingMessage';
+export * from './SystemMessage';
+
+export * from './ConversationActions';
+export * from './ConversationBody';
+export * from './ConversationHeader';
+export * from './ConversationName';
+export * from './ConversationContext';
+export * from './Conversation';

package/src/ui/Thread/ThreadActions.tsx

@@ -0,0 +1,22 @@
+import { Button, Tooltip } from 'antd';
+import { customize } from '../customize';
+import { useThreadContext } from './ThreadContext';
+import { Icon } from '../common/Icon';
+
+export const ThreadActions = customize('ThreadActions', () => {
+  const { watch, onWatch } = useThreadContext();
+
+  if (!watch) {
+    return (
+      <Tooltip title="Watch thread">
+        <Button type="link" icon={<Icon type="watch" />} onClick={() => onWatch(true)} />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title="Unwatch thread">
+      <Button type="link" icon={<Icon type="unwatch" />} onClick={() => onWatch(false)} />
+    </Tooltip>
+  );
+});

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,127 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { MessageBody, chatifyApi, parseThreadMessageId } 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 } = chatifyApi.useGetThreadQuery({ id: threadId });
+  const { data: messageList } = chatifyApi.useGetThreadMessageListQuery({ threadId });
+  const { id, name, archive, lastReadMessageId, watch } = thread ?? {};
+  const { messages, hasMore } = messageList ?? {};
+
+  const [read] = chatifyApi.useReadThreadMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextThreadMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ threadId }), [fetchNext, threadId]);
+
+  const [send] = chatifyApi.useSendThreadMessageMutation();
+  const onSend = useCallback(
+    (message: MessageBody) => send({ body: message, threadId }).unwrap(),
+    [threadId, send],
+  );
+
+  const { data: readQueue } = chatifyApi.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] = chatifyApi.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';
@@ -8,6 +8,9 @@ import UserDeleteOutlined from '@ant-design/icons/UserDeleteOutlined';
 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;
 
@@ -18,12 +21,16 @@ export interface IconProps {
 export const ICONS = {
   attach: PaperClipOutlined,
   send: SendOutlined,
-  remove: UserDeleteOutlined,
-  remove_delete_history: UsergroupDeleteOutlined,
-  add: UserAddOutlined,
-  add_with_history: UsergroupAddOutlined,
-  team: TeamOutlined,
+  'remove-member': UserDeleteOutlined,
+  'remove-member-delete-history': UsergroupDeleteOutlined,
+  'add-member': UserAddOutlined,
+  'add-member-with-history': UsergroupAddOutlined,
+  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,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;