@webinex/chatify 1.0.0-rc2 → 1.0.0-rc3

package/src/ui/AddChat.tsx

@@ -1,55 +0,0 @@
-import { Button, Form, Input, Select } from 'antd';
-import { useAccounts, useAddChat } from '../core';
-import { useCallback, useMemo } from 'react';
-import { uniqId } from '../util';
-import { useLocalizer } from './localizer';
-
-type FormValue = {
-  name: string;
-  members: string[];
-};
-
-export function AddChat() {
-  const [add, { isFetching: adding }] = useAddChat();
-  const { data: accounts, isFetching } = useAccounts();
-  const localizer = useLocalizer();
-  const options = useMemo(() => accounts?.map((x) => ({ value: x.id, label: x.name })), [accounts]);
-
-  const onSubmit = useCallback(
-    (value: FormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-        requestId: uniqId(),
-      }),
-    [add],
-  );
-
-  return (
-    <div className="wxchtf-add-chat">
-      <h3>{localizer.addChat.title()}</h3>
-      <Form onFinish={onSubmit} layout="vertical" disabled={adding}>
-        <Form.Item
-          name="name"
-          label={localizer.addChat.name.label()}
-          rules={[
-            { required: true, message: localizer.addChat.name.required() },
-            { max: 250, message: localizer.addChat.name.max250() },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="members"
-          label={localizer.addChat.members.label()}
-          rules={[{ required: true, message: localizer.addChat.members.required() }]}
-        >
-          <Select mode="multiple" loading={isFetching} options={options} />
-        </Form.Item>
-        <Button loading={adding} type="primary" block htmlType="submit">
-          {localizer.addChat.submitBtn()}
-        </Button>
-      </Form>
-    </div>
-  );
-}

package/src/ui/Aside.tsx

@@ -1,41 +0,0 @@
-import { Menu, MenuProps } from 'antd';
-import { useCallback, useEffect, useMemo } from 'react';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
-import { useChatList, useDispatch, useSelect } from '../core';
-import { ChatListItemBox } from './ChatListItem';
-
-export function Aside() {
-  const activeChatId = useSelect((x) => x.ui.chatId, []);
-  const dispatch = useDispatch();
-  const selected = useMemo(() => (activeChatId ? [activeChatId] : []), [activeChatId]);
-
-  const onSelect = useCallback(
-    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) =>
-      dispatch({ type: 'chat_open', data: { chatId: info.selectedKeys[0] } }),
-    [dispatch],
-  );
-
-  const { data: chats } = useChatList();
-
-  const items = useMemo<MenuItemType[]>(() => {
-    if (!chats) {
-      return [];
-    }
-
-    return chats.map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
-  }, [chats]);
-
-  useEffect(() => {
-    if (!activeChatId && chats && chats.length > 0) {
-      dispatch({ type: 'chat_open', data: { chatId: chats[0].id } });
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats, dispatch]);
-
-  return (
-    <div className="wxchtf-aside">
-      {chats && <Menu className="wxchtf-chats" selectedKeys={selected} onSelect={onSelect} items={items} />}
-    </div>
-  );
-}

package/src/ui/Chat.tsx

@@ -1,26 +0,0 @@
-import { ChatHeader } from './ChatHeader';
-import { ChatBody } from './ChatBody';
-import { InputForm } from './InputForm';
-import { useChat } from '../core';
-import { useMe } from '../ChatifyContext';
-
-export interface ChatProps {
-  id: string;
-}
-
-export function Chat(props: ChatProps) {
-  const { id } = props;
-  const me = useMe();
-  const { data: chat } = useChat({ chatId: id });
-  const isMember = chat?.members.map((x) => x.id).includes(me) === true;
-
-  return (
-    <>
-      <div className="wxchtf-chat">
-        <ChatHeader id={id} />
-        <ChatBody id={id} />
-      </div>
-      {isMember && <InputForm />}
-    </>
-  );
-}

package/src/ui/ChatBody.tsx

@@ -1,43 +0,0 @@
-import { MessageBox } from './Message';
-import { useMessages } from '../core';
-import { LoadMore } from './LoadMore';
-import { SendingMessage } from './SendingMessage';
-import { SystemMessage } from './SystemMessage';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export interface ChatBodyProps {
-  id: string;
-}
-
-export function ChatBody(props: ChatBodyProps) {
-  const { id } = props;
-  const { data: messages } = useMessages({ 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 <SystemMessage text={x.text} sentAt={x.sentAt} />;
-        }
-
-        switch (x.type) {
-          case 'message': {
-            return <MessageBox message={x} key={x.id} />;
-          }
-
-          case 'sending': {
-            return <SendingMessage key={x.requestId} text={x.text} files={x.files} />;
-          }
-
-          case 'more': {
-            return <LoadMore key={index} chatId={id} />;
-          }
-
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-}

package/src/ui/ChatHeader.tsx

@@ -1,33 +0,0 @@
-import { useChat, useSelect, ChatListItem } from '../core';
-import { Col, Row, Space } from 'antd';
-import { ChatHeaderMembers } from './ChatHeaderMembers';
-import { ChatSettingsButton } from './ChatHeaderSettingsButton';
-import { ChatName } from './ChatName';
-
-export interface ChatHeaderProps {
-  id: string;
-}
-
-export function ChatHeader(props: ChatHeaderProps) {
-  const { id } = props;
-  const { data: chat } = useChat({ chatId: id });
-  const chatListItem = useSelect(
-    (x) => x.query['chat-list'].data?.find((x: ChatListItem) => x.id === id),
-    [id],
-  );
-  const name = chat?.name ?? chatListItem?.name;
-
-  return (
-    <div className="wxchtf-chat-header">
-      <Row justify="space-between" align="middle">
-        <Col className="wxchtf-chat-name">{name && <ChatName name={name} />}</Col>
-        <Col className="wxchtf-chat-members">
-          <Space align="center">
-            <ChatHeaderMembers id={id} />
-            <ChatSettingsButton id={id} />
-          </Space>
-        </Col>
-      </Row>
-    </div>
-  );
-}

package/src/ui/ChatHeaderSettingsButton.tsx

@@ -1,26 +0,0 @@
-import { useDispatch } from '../core';
-import { Button } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-import { FC, useCallback } from 'react';
-import { customize } from '../util';
-
-export interface ChatSettingsButtonProps {
-  id: string;
-}
-
-const _ChatSettingsButton: FC<ChatSettingsButtonProps> = (props) => {
-  const { id } = props;
-  const dispatch = useDispatch();
-  const onSettingsClick = useCallback(
-    () => dispatch({ type: 'chat_settings_open', data: { chatId: id } }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch],
-  );
-
-  return <Button onClick={onSettingsClick} type="link" icon={<SettingOutlined />} />;
-};
-
-_ChatSettingsButton.displayName = 'ChatSettingsButton';
-
-export const ChatSettingsButton = customize('ChatSettingsButton', _ChatSettingsButton);

package/src/ui/ChatListItem.tsx

@@ -1,101 +0,0 @@
-import { useLocalizer } from './localizer';
-import { formatSystemMessage } from './SystemMessage';
-import { Avatar } from './Avatar';
-import { ChatName } from './ChatName';
-import { ChatListItem as ChatListItemModel } from '../core';
-import { FC } from 'react';
-import { customize } from '../util';
-
-export interface ChatListItemBoxProps {
-  chat: ChatListItemModel;
-}
-
-const _ChatListItemName: FC<ChatListItemBoxProps> = (props) => {
-  const { name } = props.chat;
-
-  return (
-    <div className="wxchtf-chat-name">
-      <ChatName name={name} />
-    </div>
-  );
-};
-
-_ChatListItemName.displayName = 'ChatListItemName';
-
-export const ChatListItemName = customize('ChatListItemName', _ChatListItemName);
-
-const _ChatListItemUnreadCount: FC<ChatListItemBoxProps> = (props) => {
-  const { unreadCount } = props.chat;
-
-  if (unreadCount <= 0) {
-    return null;
-  }
-
-  return <div className="wxchtf-unread-count">{unreadCount}</div>;
-};
-
-_ChatListItemUnreadCount.displayName = 'ChatListItemUnreadCount';
-
-export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', _ChatListItemUnreadCount);
-
-const _ChatListItemLastMessage: FC<ChatListItemBoxProps> = (props) => {
-  return (
-    <div className="wxchtf-chat-last">
-      <ChatListItemLastMessageAuthor {...props} />
-      <ChatListItemLastMessageContent {...props} />
-    </div>
-  );
-};
-
-_ChatListItemLastMessage.displayName = 'ChatListItemLastMessage';
-
-export const ChatListItemLastMessage = customize('ChatListItemLastMessage', _ChatListItemLastMessage);
-
-export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemBoxProps>, string>(
-  'ChatListItemLastMessageAuthor',
-  (props) => {
-    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>
-    );
-  },
-);
-
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>, string>(
-  '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>
-    );
-  },
-);
-
-const _ChatListItemBox: FC<ChatListItemBoxProps> = (props) => {
-  const { message } = props.chat;
-
-  return (
-    <div className={'wxchtf-chat' + (!message.read ? ' --unread' : '')}>
-      <ChatListItemName {...props} />
-      <ChatListItemUnreadCount {...props} />
-      <ChatListItemLastMessage {...props} />
-    </div>
-  );
-};
-
-_ChatListItemBox.displayName = 'ChatListItemBox';
-
-export const ChatListItemBox = customize('ChatListItemBox', _ChatListItemBox);

package/src/ui/ChatSettings.tsx

@@ -1,59 +0,0 @@
-import { Button, Col, List, Row, Select } from 'antd';
-import { Account, useAccounts, useAddMember, useChat, useSelect } from '../core';
-import { CloseOutlined } from '@ant-design/icons';
-import { useRemoveMember } from '../core';
-import { useCallback, useMemo } from 'react';
-
-function Member(props: { account: Account; chatId: string }) {
-  const { account, chatId } = props;
-  const [remove] = useRemoveMember();
-
-  const onRemoveClick = useCallback(
-    () => remove({ chatId, accountId: account.id, deleteHistory: false }),
-    [remove, chatId, account.id],
-  );
-
-  return (
-    <List.Item>
-      {account.name} <Button onClick={onRemoveClick} type="link" icon={<CloseOutlined />} />
-    </List.Item>
-  );
-}
-
-export function ChatSettings() {
-  const [chatId] = useSelect((x) => [x.ui.chatId], []);
-  const { data: chat } = useChat({ chatId: chatId! });
-  const [add] = useAddMember();
-  const { data: accounts } = useAccounts();
-  const accountOptions = useMemo(() => accounts?.map((x) => ({ value: x.id, label: x.name })), [accounts]);
-
-  const onAdd = useCallback(
-    (id: string) => add({ chatId: chatId!, accountId: id, withHistory: true }),
-    [add, chatId],
-  );
-
-  if (!chat) {
-    return null;
-  }
-
-  return (
-    <div className="wxchtf-chat-settings">
-      <Row justify="space-between">
-        <Col>
-          <h3 className="wxchtf-title">{chat.name}</h3>
-        </Col>
-        <Col>
-          <Button type="link" icon={<CloseOutlined />} />
-        </Col>
-      </Row>
-      <h4>Members</h4>
-      <List
-        dataSource={chat.members}
-        rowKey="id"
-        renderItem={(account) => <Member account={account} chatId={chatId!} />}
-      />
-
-      <Select<string> style={{ width: '350px' }} options={accountOptions} value={null} onSelect={onAdd} />
-    </div>
-  );
-}

package/src/ui/Footer.tsx

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { customize } from '../util';
-
-const _Footer: FC = () => <div className="wxchtf-footer"></div>;
-_Footer.displayName = 'Footer';
-
-export const Footer = customize('Footer', _Footer);

package/src/ui/Header.tsx

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { AddChatButton } from './AddChatButton';
-import { customize } from '../util';
-
-const _Header: FC = () => {
-  return (
-    <div className="wxchtf-header">
-      <AddChatButton />
-    </div>
-  );
-};
-
-_Header.displayName = 'Header';
-export const Header = customize('Header', _Header);

package/src/ui/InputForm.tsx

@@ -1,51 +0,0 @@
-import { Button, Input } from 'antd';
-import { useCallback, useState } from 'react';
-import isHotkey from 'is-hotkey';
-import { useAddMessage } from '../core/useAddMessage';
-import { uniqId } from '../util';
-import { useSelect } from '../core';
-import { useLocalizer } from './localizer';
-import { Icon } from './Icon';
-
-const isSend = isHotkey('ctrl+enter');
-
-export function InputForm() {
-  const chatId = useSelect((x) => x.ui.chatId!, []);
-  const [add] = useAddMessage({ chatId });
-  const [text, setText] = useState('');
-  const localizer = useLocalizer();
-
-  const onSend = useCallback(() => {
-    setText('');
-    add({ text: text, files: [], requestId: uniqId() });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, text]);
-
-  return (
-    <div className="wxchtf-input-form">
-      <div className="wxchtf-input-box">
-        <div className="wxchtf-add-files-box">
-          <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
-        </div>
-        <div className="wxchtf-text-input-box">
-          <Input.TextArea
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            autoSize={{ maxRows: 5 }}
-            className="wxchtf-text-input-textarea"
-            placeholder={localizer.input.placeholder()}
-            onKeyDown={(event) => {
-              if (isSend(event)) {
-                onSend();
-              }
-            }}
-          />
-        </div>
-        <div className="wxchtf-submit-btn-box">
-          <Button onClick={onSend} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/Main.tsx

@@ -1,16 +0,0 @@
-import { useSelect } from '../core';
-import { AddChat } from './AddChat';
-import { Chat } from './Chat';
-import { ChatSettings } from './ChatSettings';
-
-export function Main() {
-  const { view, chatId } = useSelect((x) => ({ view: x.ui.view, chatId: x.ui.chatId }), []);
-
-  return (
-    <div className="wxchtf-main">
-      {view === 'chat' && chatId && <Chat id={chatId} key={chatId} />}
-      {view === 'new-chat' && <AddChat />}
-      {view === 'chat-settings' && <ChatSettings />}
-    </div>
-  );
-}

package/src/ui/Message.tsx

@@ -1,118 +0,0 @@
-import { useMe } from '../ChatifyContext';
-import { FC, Ref, RefObject, useEffect, useMemo, useRef } from 'react';
-import { Message, useDispatch, useSelect } from '../core';
-import { customize } from '../util';
-import { useLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-
-export interface MessageBoxProps {
-  message: Message;
-}
-
-export interface MessageRowProps extends MessageBoxProps {
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export const MessageAuthor = customize<FC<MessageBoxProps>, string>('MessageAuthor', (props) => {
-  const { sentBy } = props.message;
-
-  return (
-    <div className="wxchtf-message-author">
-      <Avatar account={sentBy} />
-    </div>
-  );
-});
-
-export const MessageText = customize<FC<MessageBoxProps>, string>('MessageText', (props) => {
-  const { text } = props.message;
-  return <div className="wxchtf-message-text">{text}</div>;
-});
-
-export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInfoBox', (props) => {
-  const { message } = props;
-  const { id, sentBy, sentAt, read } = message;
-  const me = useMe();
-  const my = sentBy.id === me;
-  const localizer = useLocalizer();
-  const reading = useSelect((x) => x.read.queued.includes(id), []);
-
-  return (
-    <div className="wxchtf-message-info-box">
-      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {read !== undefined && !my && (
-        <div className="wxchtf-message-read-box">
-          {reading ? localizer.message.reading() : localizer.message.read()}
-        </div>
-      )}
-    </div>
-  );
-});
-
-export const MessageContent = customize<FC<MessageBoxProps>, string>('MessageContent', (props) => {
-  return (
-    <div className="wxchtf-message-content">
-      <MessageText {...props} />
-      <MessageInfoBox {...props} />
-    </div>
-  );
-});
-
-export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (props) => {
-  const { message, containerRef } = props;
-  const { sentBy } = message;
-  const me = useMe();
-  const my = sentBy.id === me;
-
-  return (
-    <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
-      <MessageAuthor {...props} />
-      <MessageContent {...props} />
-    </div>
-  );
-});
-
-export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  return (
-    <>
-      <MessageReadObserver messageRef={ref} {...props} />
-      <MessageRow containerRef={ref} {...props} />
-    </>
-  );
-});
-
-export interface MessageReadObserverProps extends MessageBoxProps {
-  messageRef: RefObject<HTMLDivElement | null>;
-}
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>, string>(
-  'MessageReadObserver',
-  (props) => {
-    const { message, messageRef } = props;
-    const dispatch = useDispatch();
-    const readRef = useRef(false);
-
-    const observer = useMemo(
-      () =>
-        new IntersectionObserver(([entry]) => {
-          if (entry.isIntersecting && !readRef.current && !message.read) {
-            readRef.current = true;
-            dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
-          }
-        }),
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [],
-    );
-
-    useEffect(() => {
-      observer.observe(messageRef.current!);
-      return () => observer.disconnect();
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [observer]);
-
-    return <></>;
-  },
-);

package/src/ui/SendingMessage.tsx

@@ -1,50 +0,0 @@
-import { FC } from 'react';
-import { File } from '../core';
-import { customize } from '../util';
-import { useLocalizer } from './localizer';
-
-export interface SendingMessageProps {
-  text: string;
-  files: File[];
-}
-
-export const SendingMessageText = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageText',
-  (props) => {
-    const { text } = props;
-    return <div className="wxchtf-sending-message-text">{text}</div>;
-  },
-);
-
-export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageInfoBox',
-  () => {
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-sending-message-info-box">
-        <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
-      </div>
-    );
-  },
-);
-
-export const SendingMessageContent = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageContent',
-  (props) => {
-    return (
-      <div className="wxchtf-sending-message-content">
-        <SendingMessageText {...props} />
-        <SendingMessageInfoBox {...props} />
-      </div>
-    );
-  },
-);
-
-export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
-  return (
-    <div className="wxchtf-sending-message">
-      <SendingMessageContent {...props} />
-    </div>
-  );
-});

package/src/ui/SystemMessage.tsx

@@ -1,32 +0,0 @@
-import { FC } from 'react';
-import { customize } from '../util';
-import { Localizer, useLocalizer } from './localizer';
-
-export interface SystemMessageProps {
-  text: string;
-  sentAt: string;
-}
-
-export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
-  if (text === 'chatify://chat-created') {
-    return localizer.system.chatCreated();
-  }
-
-  if (text.startsWith('chatify://member-added::')) {
-    return localizer.system.memberAdded();
-  }
-
-  return text;
-}
-
-export const SystemMessage = customize<FC<SystemMessageProps>, string>('SystemMessage', (props) => {
-  const { text, sentAt } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <div className="wxchtf-system-message">
-      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
-      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
-    </div>
-  );
-});