@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/ui/{Message → Conversation/Message}/MessageContent.tsx

@@ -1,13 +1,11 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageText } from './MessageText';
-import { MessageInfoBox } from './MessageInfoBox';
 import type { MessageBoxProps } from './MessageBox';
 
 export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
   return (
     <div className="wxchtf-message-content">
       <MessageText {...props} />
-      <MessageInfoBox {...props} />
     </div>
   );
 });

package/src/ui/{Message → Conversation/Message}/MessageInfoBox.tsx

@@ -1,21 +1,24 @@
-import { useMe } from '../../ChatifyContext';
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { useConversation } from '../ConversationContext';
 import type { MessageBoxProps } from './MessageBox';
 
 export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
   const { message } = props;
   const { id, sentBy, sentAt } = message;
-  const me = useMe();
+  const { lastReadMessageId, isReading, noReadTracking } = useConversation();
+  const me = chatifyApi.settings.me();
   const my = sentBy.id === me;
   const localizer = useLocalizer();
-  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
+  const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
+  const reading = !isRead && isReading(id);
 
   return (
     <div className="wxchtf-message-info-box">
+      {!my && <div className="wxchtf-message-author-name">{sentBy.name},</div>}
       <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {!my && (
+      {!my && !noReadTracking && (
         <div className="wxchtf-message-read-box">
           {reading ? localizer.message.reading() : localizer.message.read()}
         </div>

package/src/ui/{Message → Conversation/Message}/MessageRow.tsx

@@ -1,9 +1,10 @@
-import { useMe } from '../../ChatifyContext';
 import { Ref } from 'react';
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageAuthor } from './MessageAuthor';
 import { MessageContent } from './MessageContent';
 import { MessageBoxProps } from './MessageBox';
+import { MessageInfoBox } from './MessageInfoBox';
+import { chatifyApi } from '../../../core';
 
 export interface MessageRowProps extends MessageBoxProps {
   containerRef?: Ref<HTMLDivElement>;
@@ -12,13 +13,16 @@ export interface MessageRowProps extends MessageBoxProps {
 export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
   const { message, containerRef } = props;
   const { sentBy } = message;
-  const me = useMe();
+  const me = chatifyApi.settings.me();
   const my = sentBy.id === me;
 
   return (
     <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
       <MessageAuthor {...props} />
-      <MessageContent {...props} />
+      <div>
+        <MessageInfoBox {...props} />
+        <MessageContent {...props} />
+      </div>
     </div>
   );
 });

package/src/ui/{Message → Conversation/Message}/MessageText.tsx

@@ -1,4 +1,4 @@
-import { customize } from '../customize';
+import { customize } from '../../customize';
 import { MessageBoxProps } from './MessageBox';
 
 export const MessageText = customize('MessageText', (props: MessageBoxProps) => {

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

@@ -0,0 +1,22 @@
+import { MessageAuthor } from './MessageAuthor';
+import { MessageBox } from './MessageBox';
+import { MessageContent } from './MessageContent';
+import { MessageInfoBox } from './MessageInfoBox';
+import { MessageRow } from './MessageRow';
+import { MessageText } from './MessageText';
+
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';
+
+export interface MessageCustomizeValue {
+  MessageAuthor?: typeof MessageAuthor.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+}

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

@@ -1,14 +1,13 @@
 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>();
@@ -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,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';
@@ -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;
+}