@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/ui/ChatList/ChatListItemBox.tsx

@@ -0,0 +1,22 @@
+import { ChatListItem as ChatListItemModel } from '../../core';
+import { customize } from '../customize';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+
+export interface ChatListItemBoxProps {
+  chat: ChatListItemModel;
+}
+
+export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
+  const { message, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
+
+  return (
+    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
+      <ChatListItemName {...props} />
+      <ChatListItemUnreadCount {...props} />
+      <ChatListItemLastMessage {...props} />
+    </div>
+  );
+});

package/src/ui/ChatList/ChatListItemLastMessage.tsx

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

package/src/ui/ChatList/ChatListItemLastMessageAuthor.tsx

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

package/src/ui/ChatList/ChatListItemLastMessageContent.tsx

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

package/src/ui/ChatList/ChatListItemName.tsx

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

package/src/ui/ChatList/ChatListItemUnreadCount.tsx

@@ -0,0 +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>;
+});

package/src/ui/ChatList/index.ts

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

package/src/ui/ChatName.tsx

@@ -1,15 +1,10 @@
-import { FC } from 'react';
-import { customize } from '../util';
-
-export interface ChatNameProps {
-  name: string;
-}
-
-const _ChatName: FC<ChatNameProps> = (props) => {
-  const { name } = props;
-  return <>{name}</>;
-};
-
-_ChatName.displayName = 'ChatName';
-
-export const ChatName = customize('ChatName', _ChatName);
+import { customize } from './customize';
+
+export interface ChatNameProps {
+  name: string;
+}
+
+export const ChatName = customize('ChatName', (props: ChatNameProps) => {
+  const { name } = props;
+  return <>{name}</>;
+});

package/src/ui/ChatPanel/ChatBody.tsx

@@ -0,0 +1,44 @@
+import { MessageBox } from '../Message';
+import { useGetMessagesQuery } from '../../core';
+import { Next } from '../Next';
+import { SendingMessageBox } from '../SendingMessage';
+import { SystemMessageBox } from '../SystemMessage/SystemMessageBox';
+import { MessageSkeleton } from '../MessageSkeleton';
+import { customize } from '../customize';
+
+export interface ChatBodyProps {
+  id: string;
+}
+
+export const ChatBody = customize('ChatBody', (props: ChatBodyProps) => {
+  const { id } = props;
+  const { data: messages } = useGetMessagesQuery({ chatId: id });
+
+  return (
+    <div className="wxchtf-chat-body">
+      {!messages && <MessageSkeleton count={5} />}
+      {messages?.map((x, index) => {
+        if (x.type === 'message' && x.sentBy.id === 'chatify::system') {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        switch (x.type) {
+          case 'message': {
+            return <MessageBox message={x} key={x.id} />;
+          }
+
+          case 'sending': {
+            return <SendingMessageBox key={x.requestId} text={x.text} files={x.files} />;
+          }
+
+          case 'next': {
+            return <Next key={'next-' + messages.length + '-' + index} chatId={id} />;
+          }
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+});

package/src/ui/ChatPanel/ChatHeader.tsx

@@ -0,0 +1,33 @@
+import { Col, Row, Space } from 'antd';
+import { ChatHeaderMembers } from './ChatHeaderMembers';
+import { ChatMembersButton } from './ChatMembersButton';
+import { customize } from '../customize';
+import { ChatHeaderName } from './ChatHeaderName';
+import { useSelect } from '../../core';
+
+export interface ChatHeaderProps {
+  id: string;
+}
+
+export const ChatHeader = customize('ChatHeader', (props: ChatHeaderProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+
+  return (
+    <div className="wxchtf-chat-header">
+      <Row justify="space-between" align="middle">
+        <Col>
+          <ChatHeaderName id={id} />
+        </Col>
+        {chat.active && (
+          <Col className="wxchtf-chat-members">
+            <Space align="center">
+              <ChatHeaderMembers id={id} />
+              <ChatMembersButton id={id} />
+            </Space>
+          </Col>
+        )}
+      </Row>
+    </div>
+  );
+});

package/src/ui/{ChatHeaderMembers.tsx → ChatPanel/ChatHeaderMembers.tsx}

@@ -1,30 +1,26 @@
-import { FC } from 'react';
-import { useChat } from '../core';
-import { Avatar, Tooltip } from 'antd';
-import { customize } from '../util';
-
-export interface ChatHeaderMembersProps {
-  id: string;
-}
-
-const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
-  const { id } = props;
-  const { data: chat } = useChat({ chatId: id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <Avatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar src={x.avatar}>{x.name}</Avatar>
-        </Tooltip>
-      ))}
-    </Avatar.Group>
-  );
-};
-
-_ChatHeaderMembers.displayName = 'ChatHeaderMembers';
-export const ChatHeaderMembers = customize('ChatHeaderMembers', _ChatHeaderMembers);
+import { useGetChatQuery } from '../../core';
+import { Avatar, Tooltip } from 'antd';
+import { customize } from '../customize';
+
+export interface ChatHeaderMembersProps {
+  id: string;
+}
+
+export const ChatHeaderMembers = customize('ChatHeaderMembers', (props: ChatHeaderMembersProps) => {
+  const { id } = props;
+  const { data: chat } = useGetChatQuery({ chatId: id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <Avatar.Group maxCount={5}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar src={x.avatar}>{x.name}</Avatar>
+        </Tooltip>
+      ))}
+    </Avatar.Group>
+  );
+});

package/src/ui/ChatPanel/ChatHeaderName.tsx

@@ -0,0 +1,67 @@
+import { Input, Tooltip } from 'antd';
+import { useSelect, useUpdateChatNameMutation } from '../../core';
+import { ChatName } from '../ChatName';
+import { customize } from '../customize';
+import { useEffect, useState } from 'react';
+import isHotkey from 'is-hotkey';
+
+export interface ChatHeaderNameProps {
+  id: string;
+}
+
+const isEscape = isHotkey('escape');
+const isEnter = isHotkey('enter');
+
+function useUpdateChatName(id: string, value: string) {
+  const [updateChatName] = useUpdateChatNameMutation();
+  return () => updateChatName({ id, name: value });
+}
+
+export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const name = chat.name;
+  const [editNameValue, setEditNameValue] = useState('');
+  const [edit, setEdit] = useState(false);
+  const updateChatName = useUpdateChatName(id, editNameValue);
+
+  useEffect(() => {
+    if (edit) {
+      setEditNameValue(name);
+    }
+  }, [edit, name]);
+
+  if (!chat.active) {
+    return <span className="wxchtf-chat-name">{name}</span>;
+  }
+
+  if (edit) {
+    return (
+      <Input
+        value={editNameValue}
+        onChange={(e) => setEditNameValue(e.target.value)}
+        onBlur={() => setEdit(false)}
+        onKeyDown={(e) => {
+          if (isEscape(e)) {
+            setEdit(false);
+          } else if (isEnter(e)) {
+            setEdit(false);
+
+            if (editNameValue !== name) {
+              updateChatName();
+            }
+          }
+        }}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <Tooltip title="Click to edit name...">
+      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
+        <ChatName name={name} />
+      </span>
+    </Tooltip>
+  );
+});

package/src/ui/ChatPanel/ChatMembersButton.tsx

@@ -0,0 +1,21 @@
+import { useDispatch } from '../../core';
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export interface ChatMembersButtonProps {
+  id: string;
+}
+
+export const ChatMembersButton = customize('ChatMembersButton', (_: ChatMembersButtonProps) => {
+  const dispatch = useDispatch();
+  const onSettingsClick = useCallback(
+    () => dispatch({ type: 'toggle_members_view', data: void 0 }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return <Button onClick={onSettingsClick} type="link" icon={<Icon type="team" />} />;
+});

package/src/ui/ChatPanel/ChatMembersPanel.tsx

@@ -0,0 +1,117 @@
+import { Button, List, Space, Tooltip } from 'antd';
+import {
+  useAddMemberMutation,
+  useGetAccountsQuery,
+  useGetChatQuery,
+  useRemoveMemberMutation,
+} from '../../core';
+import { customize } from '../customize';
+import { useCallback, useMemo } from 'react';
+import { Icon } from '../Icon';
+import { Avatar } from '../Avatar';
+
+export interface ChatMembersPanelProps {
+  id: string;
+}
+
+interface ChatMemberListItemProps {
+  id: string;
+  chatId: string;
+}
+
+function useAdd(chatId: string, accountId: string, withHistory: boolean) {
+  const [add, state] = useAddMemberMutation();
+  const onAdd = useCallback(
+    () => add({ chatId, accountId, withHistory }),
+    [add, chatId, accountId, withHistory],
+  );
+  return [onAdd, state] as const;
+}
+
+function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
+  const [remove, state] = useRemoveMemberMutation();
+  const onRemove = useCallback(
+    () => remove({ chatId, accountId, deleteHistory }),
+    [remove, chatId, accountId, deleteHistory],
+  );
+  return [onRemove, state] as const;
+}
+
+const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
+  const { chatId } = props;
+  const { data: chat } = useGetChatQuery({ chatId });
+  const { data: accounts } = useGetAccountsQuery();
+  const account = accounts!.find((x) => x.id === props.id)!;
+  const isMember = chat!.members.some((x) => x.id === account.id);
+  const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
+  const [onAddWithHistory] = useAdd(chatId, account.id, true);
+  const [onRemoveKeepHistory] = useRemove(chatId, account.id, false);
+  const [onRemoveDeleteHistory] = useRemove(chatId, account.id, true);
+
+  return (
+    <List.Item
+      className="wxchtf-chat-members-list-item"
+      actions={
+        isMember
+          ? [
+              <Tooltip key="remove" title="Remove (keep history)">
+                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove" />} />
+              </Tooltip>,
+              <Tooltip key="remove_delete_history" title="Remove (delete history)">
+                <Button
+                  onClick={onRemoveDeleteHistory}
+                  type="link"
+                  icon={<Icon type="remove_delete_history" />}
+                />
+              </Tooltip>,
+            ]
+          : [
+              <Tooltip key="add_no_history" title="Add (no history)">
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add" />} />
+              </Tooltip>,
+              <Tooltip key="add" title="Add (share history)">
+                <Button onClick={onAddWithHistory} type="link" icon={<Icon type="add_with_history" />} />
+              </Tooltip>,
+            ]
+      }
+    >
+      <Space>
+        <Avatar account={account} />
+        <span>{account.name}</span>
+      </Space>
+    </List.Item>
+  );
+});
+
+export const ChatMembersPanel = customize('ChatMembersPanel', (props: ChatMembersPanelProps) => {
+  const { id } = props;
+
+  const { data: chat } = useGetChatQuery({ chatId: id });
+  const { data: accounts } = useGetAccountsQuery();
+  const ordered = useMemo(
+    () =>
+      accounts
+        ?.slice()
+        .sort(
+          (a, b) =>
+            (chat?.members.some((m) => m.id === a.id) ? -100 : 0) -
+            (chat?.members.some((m) => m.id === b.id) ? -100 : 0) +
+            a.name.localeCompare(b.name),
+        ),
+    [accounts, chat],
+  );
+
+  if (!chat?.members || !accounts) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat-members-panel">
+      <List
+        className="wxchtf-chat-members-list"
+        dataSource={ordered}
+        renderItem={(item) => <ChatMemberListItem id={item.id} chatId={id} />}
+      />
+    </div>
+  );
+});

package/src/ui/ChatPanel/ChatPanel.tsx

@@ -0,0 +1,27 @@
+import { ChatHeader } from './ChatHeader';
+import { ChatBody } from './ChatBody';
+import { InputBox } from '../InputBox/InputBox';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { ChatMembersPanel } from './ChatMembersPanel';
+
+export interface ChatPanelProps {
+  id: string;
+}
+
+export const ChatPanel = customize('ChatPanel', (props: ChatPanelProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const chatMembersOpen = useSelect((x) => x.ui.showMembers, []);
+
+  return (
+    <div className="wxchtf-chat-panel">
+      <div className="wxchtf-chat-main">
+        <ChatHeader id={id} />
+        <ChatBody id={id} />
+        {chat.active && <InputBox />}
+      </div>
+      {chatMembersOpen && <ChatMembersPanel id={id} />}
+    </div>
+  );
+});

package/src/ui/ChatPanel/index.ts

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