@webinex/chatify 1.0.0-alpha00

package/src/ui/ChatSettings.tsx

@@ -0,0 +1,59 @@
+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: true }),
+    [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/Chatify.tsx

@@ -0,0 +1,47 @@
+import { CSSProperties, useCallback } from 'react';
+import { useSignalR, ReducerProvider, useDispatch, useReadMonitor } from '../core';
+import { Aside } from './Aside';
+import { Main } from './Main';
+import { Button } from 'antd';
+import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  useSignalR();
+  useReadMonitor();
+  const dispatch = useDispatch();
+  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
+
+  return (
+    <div className={className + ' wxchtf-chatify'} style={style}>
+      <div className="wxchtf-header">
+        <Button onClick={onAddChat} icon={'+'} type="link">
+          Add chat
+        </Button>
+      </div>
+      <div className="wxchtf-body">
+        <Aside />
+        <Main />
+      </div>
+      <div className="wxchtf-footer"></div>
+    </div>
+  );
+}
+
+export function Chatify(props: ChatifyProps) {
+  const { localizer = defaultLocalizer } = props;
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <ReducerProvider>
+        <Content {...props} />
+      </ReducerProvider>
+    </LocalizerContext.Provider>
+  );
+}

package/src/ui/InputForm.tsx

@@ -0,0 +1,48 @@
+import { Button, Input } from 'antd';
+import SendOutlined from '@ant-design/icons/SendOutlined';
+import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
+import { useCallback, useState } from 'react';
+import isHotkey from 'is-hotkey';
+import { useAddMessage } from '../core/useAddMessage';
+import { uniqId } from '../util';
+import { useSelect } from '../core';
+
+export function InputForm() {
+  const chatId = useSelect((x) => x.ui.chatId!, []);
+  const [add] = useAddMessage({ chatId });
+  const [text, setText] = useState('');
+
+  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={<FileAddOutlined />} 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="Start typing (Ctrl/⌘Cmd + Enter to send) ..."
+            onKeyDown={(event) => {
+              if (isHotkey('ctrl+enter')(event)) {
+                onSend();
+              }
+            }}
+          />
+        </div>
+        <div className="wxchtf-submit-btn-box">
+          <Button onClick={onSend} type="link" icon={<SendOutlined />} className="wxchtf-submit-btn" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/LoadMore.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLoadMore } from '../core';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export interface LoadMoreProps {
+  chatId: string;
+}
+
+export function LoadMore(props: LoadMoreProps) {
+  const { chatId } = props;
+  const [loadMore, { isFetching }] = useLoadMore({ chatId });
+  const [intersecting, setIntersecting] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const observer = useMemo(
+    () => new IntersectionObserver(([entry]) => setIntersecting((prev) => prev || entry.isIntersecting)),
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(ref.current!);
+    return () => observer.disconnect();
+  }, [observer]);
+
+  useEffect(() => {
+    if (!intersecting) {
+      return;
+    }
+
+    loadMore();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intersecting]);
+
+  if (isFetching) {
+    return <MessageSkeleton count={4} />;
+  }
+
+  return <div ref={ref} />;
+}

package/src/ui/Main.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,50 @@
+import { useMe } from '../ChatifyContext';
+import { MessageMd } from './MessageMd';
+import { useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelect, Message as MessageModel } from '../core';
+
+export interface MessageProps {
+  message: MessageModel;
+}
+
+export function Message(props: MessageProps) {
+  const { message } = props;
+  const me = useMe();
+  const my = message.sentBy.id === me;
+  const dispatch = useDispatch();
+  const ref = useRef<HTMLDivElement | null>(null);
+  const readRef = useRef(false);
+  const reading = useSelect((x) => x.read.queued.includes(message.id), []);
+
+  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(ref.current!);
+    return () => observer.disconnect();
+  }, [observer]);
+
+  return (
+    <MessageMd
+      ref={ref}
+      my={my}
+      text={message.text}
+      files={message.files}
+      author={message.sentBy}
+      timestamp={message.sentAt}
+      read={message.read}
+      sending={false}
+      reading={reading}
+    />
+  );
+}

package/src/ui/MessageMd.tsx

@@ -0,0 +1,47 @@
+import { Avatar } from 'antd';
+import { Account, File } from '../core';
+import { useLocalizer } from './localizer';
+import React from 'react';
+
+export interface MessageMdProps {
+  author?: Account;
+  text: string;
+  files: File[];
+  my: boolean;
+  read?: boolean;
+  sending?: boolean;
+  reading?: boolean;
+  timestamp: string;
+}
+
+export const MessageMd = React.forwardRef(
+  (props: MessageMdProps, forwardRef: React.ForwardedRef<HTMLDivElement>) => {
+    const { author, text, my, read, reading, sending, timestamp } = props;
+    const localizer = useLocalizer();
+
+    return (
+      <div
+        ref={forwardRef}
+        className={'wxchtf-message' + (my ? ' --my' : '') + (sending ? ' --sending' : '')}
+      >
+        {author && (
+          <div className="wxchtf-message-author">
+            <Avatar src={author.avatar} />
+          </div>
+        )}
+        <div className="wxchtf-message-body">
+          <div className="wxchtf-message-text">{text}</div>
+          <div className="wxchtf-message-info-box">
+            <div className="wxchtf-message-sent-at">{localizer.timestamp(timestamp)}</div>
+            {read !== undefined && !my && (
+              <div className="wxchtf-message-read-box">
+                {reading ? localizer.message.reading() : localizer.message.read()}
+              </div>
+            )}
+            {sending && <div className="wxchtf-message-sending-box">{localizer.message.sending()}</div>}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/ui/MessageSkeleton.tsx

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

package/src/ui/SendingMessage.tsx

@@ -0,0 +1,14 @@
+import { File } from '../core';
+import { MessageMd } from './MessageMd';
+
+export interface SendingMessageProps {
+  text: string;
+  files: File[];
+}
+
+export function SendingMessage(props: SendingMessageProps) {
+  const { text, files } = props;
+  return (
+    <MessageMd text={text} files={files} my={true} sending={true} timestamp={new Date().toUTCString()} />
+  );
+}

package/src/ui/SystemMessage.tsx

@@ -0,0 +1,26 @@
+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();
+  }
+
+  throw new Error(`Unknown system message ${text}`);
+}
+
+export function SystemMessage(props: SystemMessageProps) {
+  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>
+  );
+}

package/src/ui/index.ts

@@ -0,0 +1,2 @@
+export * from './Chatify';
+export * from './localizer';

package/src/ui/localizer.tsx

@@ -0,0 +1,58 @@
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+
+export interface Localizer {
+  timestamp: (value: string) => string;
+  system: {
+    chatCreated: () => string;
+  };
+  message: {
+    read: () => React.ReactNode;
+    reading: () => React.ReactNode;
+    sending: () => React.ReactNode;
+  };
+  addChat: {
+    title: () => React.ReactNode;
+    name: {
+      label: () => React.ReactNode;
+      required: () => string;
+      max250: () => string;
+    };
+    members: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+  };
+}
+
+export const LocalizerContext = React.createContext<Localizer>(null!);
+
+export function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+
+export const defaultLocalizer: Localizer = {
+  timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  message: {
+    read: () => 'Read',
+    reading: () => 'Reading...',
+    sending: () => 'Sending...',
+  },
+  addChat: {
+    title: () => 'Add chat',
+    name: {
+      label: () => 'Name',
+      required: () => `Name is required`,
+      max250: () => 'Max 250 characters allowed',
+    },
+    members: {
+      label: () => 'Members',
+      required: () => 'Members is required',
+    },
+    submitBtn: () => 'Submit',
+  },
+  system: {
+    chatCreated: () => 'Chat created',
+  },
+};

package/src/ui/styles/aside.scss

@@ -0,0 +1,94 @@
+.wxchtf-aside {
+  flex: none;
+  width: 300px;
+  border-right: $border;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .wxchtf-chats.ant-menu {
+    flex: 1 1 auto;
+    height: 100px;
+    overflow-y: auto;
+
+    @include scrollbar();
+
+    .ant-menu-item {
+      padding: 0;
+      height: unset;
+      margin: 0;
+      width: 100%;
+      border-radius: 0;
+      line-height: 1.5;
+      border-top: $border;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &.ant-menu-item-selected .wxchtf-chat-name {
+        font-weight: 600;
+      }
+
+      .wxchtf-chat {
+        padding: 0.5rem 1rem;
+        position: relative;
+
+        &.--unread {
+          .wxchtf-chat-last {
+            font-weight: bold;
+          }
+        }
+
+        .wxchtf-chat-name {
+          font-weight: bold;
+          display: inline-block;
+        }
+
+        .wxchtf-unread-count {
+          display: inline-block;
+          padding: 0.2rem;
+          min-width: 1rem;
+          height: 1.2rem;
+          line-height: 0.7rem;
+          margin-left: 0.5rem;
+          border-radius: 50%;
+          text-align: center;
+          font-size: 0.7rem;
+          background: $unreadCountBackground;
+        }
+
+        .wxchtf-chat-last {
+          $size: 25px;
+
+          font-style: italic;
+          opacity: 0.75;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: $size;
+
+          .wxchtf-chat-last-author {
+            display: inline-block;
+            margin-right: 0.5rem;
+
+            .ant-avatar {
+              display: inline-block;
+              border: none;
+              margin-right: 5px;
+
+              @include avatarSize($size);
+            }
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          .wxchtf-chat-last-message {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+}