@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

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/common/ChatList/ChatList.tsx

@@ -0,0 +1,84 @@
+import { Menu, MenuProps } from 'antd';
+import { useMemo } from 'react';
+import { ChatListItemBox } from './ChatListItemBox';
+import { customize } from '../../customize';
+import { ChatListValue } from './ChatListValue';
+import { useLocalizer } from '../../localizer';
+import { messageSequencePart } from '../../../core';
+
+export interface ChatListProps {
+  className?: string;
+  items: ChatListValue[];
+  selected: string | null;
+  onSelect?: (id: string) => void;
+
+  /**
+   * If true, do not show read status.
+   */
+  noRead?: boolean;
+
+  /**
+   * If set, shows a message at the bottom indicating that only the top N chats are shown.
+   */
+  top?: number;
+}
+
+function useOnSelect(props: ChatListProps) {
+  const { onSelect } = props;
+
+  return useMemo(
+    () =>
+      onSelect
+        ? (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) => onSelect(info.key as string)
+        : undefined,
+    [onSelect],
+  );
+}
+
+function useMenuItems(props: ChatListProps) {
+  //28b2a1a6-c052-4761-ad2d-95ce36d59f06-000000001
+  const { items, noRead, top } = props;
+  const localizer = useLocalizer();
+
+  return useMemo<MenuProps['items']>(() => {
+    const result = items
+      ?.slice()
+      .sort(
+        (a, b) => -messageSequencePart(a.lastMessage.id).localeCompare(messageSequencePart(b.lastMessage.id)),
+      )
+      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} noRead={noRead} /> }));
+
+    if (top != null) {
+      return [
+        ...result,
+        {
+          type: 'item',
+          key: 'top',
+          disabled: true,
+          label: (
+            <div style={{ textAlign: 'center', cursor: 'text', fontStyle: 'italic' }}>
+              {localizer.chatList.topShown(top)}
+            </div>
+          ),
+        },
+      ];
+    }
+
+    return result;
+  }, [items, noRead, top, localizer]);
+}
+
+export const ChatList = customize('ChatList', (props: ChatListProps) => {
+  const { selected: selectedChatId } = props;
+  const selected = useMemo(() => (selectedChatId ? [selectedChatId] : []), [selectedChatId]);
+  const onSelect = useOnSelect(props);
+  const items = useMenuItems(props);
+
+  return (
+    <>
+      {items && (
+        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
+      )}
+    </>
+  );
+});

package/src/ui/common/ChatList/ChatListItemAvatar.tsx

@@ -0,0 +1,22 @@
+import { color } from '../../color';
+import { Icon } from '../../common/Icon';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
+  const { id } = props.chat;
+
+  return (
+    <div
+      className="wxchtf-chat-avatar"
+      style={
+        {
+          '--background-color': color(id, { lightness: 90 }),
+          '--color': color(id, { saturation: 60, lightness: 65 }),
+        } as any
+      }
+    >
+      <Icon type="chat" />
+    </div>
+  );
+});

package/src/ui/common/ChatList/ChatListItemBox.tsx

@@ -0,0 +1,32 @@
+import { customize } from '../../customize';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListValue } from './ChatListValue';
+
+export interface ChatListItemBoxProps {
+  chat: ChatListValue;
+
+  /**
+   * If true, do not show read status.
+   */
+  noRead?: boolean;
+}
+
+export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
+  const { noRead = false } = props;
+  const { lastMessage, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(lastMessage.id) >= 0;
+
+  return (
+    <div className={'wxchtf-chat' + (!read && !noRead ? ' --unread' : '')}>
+      <ChatListItemAvatar {...props} />
+      <span className="wxchtf-chat-info">
+        <ChatListItemName {...props} />
+        <ChatListItemUnreadCount {...props} />
+        <ChatListItemLastMessage {...props} />
+      </span>
+    </div>
+  );
+});

package/src/ui/{ChatList → common/ChatList}/ChatListItemLastMessage.tsx

@@ -1,15 +1,15 @@
-import { customize } from '../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-
-export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
-  return (
-    <div className="wxchtf-chat-last">
-      <ChatListItemLastMessageAuthor {...props} />
-      <ChatListItemLastMessageContent {...props} />
-      <ChatListItemLastMessageSentAt {...props} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+
+export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
+  return (
+    <div className="wxchtf-chat-last">
+      <ChatListItemLastMessageAuthor {...props} />
+      <ChatListItemLastMessageContent {...props} />
+      <ChatListItemLastMessageSentAt {...props} />
+    </div>
+  );
+});

package/src/ui/common/ChatList/ChatListItemLastMessageAuthor.tsx

@@ -0,0 +1,15 @@
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageAuthor = customize(
+  'ChatListItemLastMessageAuthor',
+  (props: ChatListItemBoxProps) => {
+    const { lastMessage } = props.chat;
+
+    if (lastMessage.sentBy.id === 'chatify::system') {
+      return null;
+    }
+
+    return <div className="wxchtf-chat-last-author">{lastMessage.sentBy.name}</div>;
+  },
+);

package/src/ui/common/ChatList/ChatListItemLastMessageContent.tsx

@@ -0,0 +1,21 @@
+import { useLocalizer } from '../../localizer';
+import { formatSystemMessage } from '../../Conversation/SystemMessage';
+import { FC } from 'react';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
+  'ChatListItemLastMessageContent',
+  (props) => {
+    const { lastMessage } = props.chat;
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-message">
+        {lastMessage.sentBy.id === 'chatify::system'
+          ? lastMessage.text && formatSystemMessage(localizer, lastMessage.text)
+          : lastMessage.text}
+      </div>
+    );
+  },
+);

package/src/ui/{ChatList → common/ChatList}/ChatListItemLastMessageSentAt.tsx

@@ -1,22 +1,22 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageSentAt = customize(
-  'ChatListItemLastMessageSentAt',
-  (props: ChatListItemBoxProps) => {
-    const {
-      chat: {
-        message: { sentAt },
-      },
-    } = props;
-
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-sent-at">
-        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
-      </div>
-    );
-  },
-);
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageSentAt = customize(
+  'ChatListItemLastMessageSentAt',
+  (props: ChatListItemBoxProps) => {
+    const {
+      chat: {
+        lastMessage: { sentAt },
+      },
+    } = props;
+
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-sent-at">
+        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
+      </div>
+    );
+  },
+);

package/src/ui/common/ChatList/ChatListItemName.tsx

@@ -0,0 +1,8 @@
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
+  const { chat } = props;
+
+  return <div className="wxchtf-chat-name">{chat.name}</div>;
+});

package/src/ui/{ChatList → common/ChatList}/ChatListItemUnreadCount.tsx

@@ -1,12 +1,12 @@
-import { customize } from '../customize';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
-  const { totalUnreadCount: unreadCount } = props.chat;
-
-  if (unreadCount <= 0) {
-    return null;
-  }
-
-  return <div className="wxchtf-unread-count">{unreadCount}</div>;
-});
+import { customize } from '../../customize';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
+  const { totalUnreadCount: unreadCount } = props.chat;
+
+  if (unreadCount == null || unreadCount <= 0) {
+    return null;
+  }
+
+  return <div className="wxchtf-unread-count">{unreadCount}</div>;
+});

package/src/ui/common/ChatList/ChatListValue.ts

@@ -0,0 +1,9 @@
+import { MessageBase } from '../../../core';
+
+export interface ChatListValue {
+  id: string;
+  name: string;
+  lastMessage: MessageBase;
+  totalUnreadCount?: number;
+  lastReadMessageId?: string | null;
+}

package/src/ui/common/ChatList/index.ts

@@ -0,0 +1,32 @@
+import { ChatList } from './ChatList';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListItemBox } from './ChatListItemBox';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+
+export * from './ChatList';
+export * from './ChatListItemAvatar';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemLastMessageSentAt';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';
+export * from './ChatListValue';
+
+export interface ChatListCustomizeValue {
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+}

package/src/ui/common/Icon.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { customize } from '../customize';
+import {
+  SendOutlined,
+  PaperClipOutlined,
+  UserAddOutlined,
+  UsergroupAddOutlined,
+  UserDeleteOutlined,
+  UsergroupDeleteOutlined,
+  TeamOutlined,
+  EditOutlined,
+  CloseOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
+
+export type IconType = keyof typeof ICONS;
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS = {
+  attach: PaperClipOutlined,
+  send: SendOutlined,
+  '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,
+  'delete-file': DeleteOutlined,
+  'open-file': DownloadOutlined,
+};
+
+export const Icon = customize<FC<IconProps>>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

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

@@ -1,19 +1,20 @@
-import { Skeleton } from 'antd';
-
-export interface MessageSkeletonProps {
-  count?: number;
-}
-
-export function MessageSkeleton(props: MessageSkeletonProps) {
-  const { count = 1 } = props;
-  return (
-    <>
-      {Array.from(Array(count)).map((_, index) => (
-        <div className="wxchtf-message-skeleton" key={index}>
-          <Skeleton.Avatar className="wxchtf-avatar" active />
-          <Skeleton.Button active className="wxchtf-content" />
-        </div>
-      ))}
-    </>
-  );
-}
+import { Skeleton } from 'antd';
+import { customize } from '../customize';
+
+export interface MessageSkeletonProps {
+  count?: number;
+}
+
+export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
+  const { count = 1 } = props;
+  return (
+    <>
+      {Array.from(Array(count)).map((_, index) => (
+        <div className="wxchtf-message-skeleton" key={index}>
+          <Skeleton.Avatar className="wxchtf-avatar" active />
+          <Skeleton.Button active className="wxchtf-content" />
+        </div>
+      ))}
+    </>
+  );
+});

package/src/ui/common/index.ts

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