@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/ui/Icon.tsx

@@ -1,33 +1,33 @@
-import { FC } from 'react';
-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';
-import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
-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';
-
-export type IconType = keyof typeof ICONS;
-
-export interface IconProps {
-  type: IconType;
-}
-
-export const ICONS = {
-  attach: PaperClipOutlined,
-  send: SendOutlined,
-  remove: UserDeleteOutlined,
-  remove_delete_history: UsergroupDeleteOutlined,
-  add: UserAddOutlined,
-  add_with_history: UsergroupAddOutlined,
-  team: TeamOutlined,
-  edit: EditOutlined,
-};
-
-export const Icon = customize<FC<IconProps>>('Icon', (props) => {
-  const { type } = props;
-  const IconComponent = ICONS[type];
-  return IconComponent ? <IconComponent /> : null;
-});
+import { FC } from 'react';
+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';
+import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
+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';
+
+export type IconType = keyof typeof ICONS;
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS = {
+  attach: PaperClipOutlined,
+  send: SendOutlined,
+  remove: UserDeleteOutlined,
+  remove_delete_history: UsergroupDeleteOutlined,
+  add: UserAddOutlined,
+  add_with_history: UsergroupAddOutlined,
+  team: TeamOutlined,
+  edit: EditOutlined,
+};
+
+export const Icon = customize<FC<IconProps>>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/InputBox/InputBox.tsx

@@ -1,38 +1,38 @@
-import { useCallback, useState } from 'react';
-import { useSelect, useSendMutation } from '../../core';
-import { uniqId } from '../../util';
-import { InputFilesBox } from './InputFilesBox';
-import { InputTextBox } from './InputTextBox';
-import { customize } from '../customize';
-import { InputSubmitButtonBox } from './InputSubmitButtonBox';
-
-function useSend(text: string, setText: (value: string) => void) {
-  const chatId = useSelect((x) => x.ui.chatId!, []);
-  const [add] = useSendMutation();
-
-  return useCallback(() => {
-    if (text.length === 0) {
-      return;
-    }
-
-    setText('');
-    add({ chatId, text: text, files: [], requestId: uniqId() });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, text]);
-}
-
-export const InputBox = customize('InputBox', () => {
-  const [text, setText] = useState('');
-  const onSend = useSend(text, setText);
-
-  return (
-    <div className="wxchtf-input-form">
-      <div className="wxchtf-input-box">
-        <InputFilesBox />
-        <InputTextBox value={text} onSend={onSend} onChange={setText} />
-        <InputSubmitButtonBox onSubmit={onSend} />
-      </div>
-    </div>
-  );
-});
+import { useCallback, useState } from 'react';
+import { useSelect, useSendMutation } from '../../core';
+import { uniqId } from '../../util';
+import { InputFilesBox } from './InputFilesBox';
+import { InputTextBox } from './InputTextBox';
+import { customize } from '../customize';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+
+function useSend(text: string, setText: (value: string) => void) {
+  const chatId = useSelect((x) => x.ui.chatId!, []);
+  const [add] = useSendMutation();
+
+  return useCallback(() => {
+    if (text.length === 0) {
+      return;
+    }
+
+    setText('');
+    add({ chatId, text: text, files: [], requestId: uniqId() });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId, text]);
+}
+
+export const InputBox = customize('InputBox', () => {
+  const [text, setText] = useState('');
+  const onSend = useSend(text, setText);
+
+  return (
+    <div className="wxchtf-input-form">
+      <div className="wxchtf-input-box">
+        <InputFilesBox />
+        <InputTextBox value={text} onSend={onSend} onChange={setText} />
+        <InputSubmitButtonBox onSubmit={onSend} />
+      </div>
+    </div>
+  );
+});

package/src/ui/InputBox/InputFilesBox.tsx

@@ -1,9 +1,9 @@
-import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export const InputFilesBox = customize('InputFilesBox', () => (
-  <div className="wxchtf-add-files-box">
-    <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
-  </div>
-));
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export const InputFilesBox = customize('InputFilesBox', () => (
+  <div className="wxchtf-add-files-box">
+    <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
+  </div>
+));

package/src/ui/InputBox/InputSubmitButtonBox.tsx

@@ -1,17 +1,17 @@
-import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export interface InputSubmitButtonBoxProps {
-  onSubmit: () => void;
-}
-
-export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
-  const { onSubmit } = props;
-
-  return (
-    <div className="wxchtf-submit-btn-box">
-      <Button onClick={onSubmit} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
-    </div>
-  );
-});
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export interface InputSubmitButtonBoxProps {
+  onSubmit: () => void;
+}
+
+export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
+  const { onSubmit } = props;
+
+  return (
+    <div className="wxchtf-submit-btn-box">
+      <Button onClick={onSubmit} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
+    </div>
+  );
+});

package/src/ui/InputBox/InputTextBox.tsx

@@ -1,50 +1,50 @@
-import { Input } from 'antd';
-import { customize } from '../customize';
-import isHotkey from 'is-hotkey';
-import { memo, useCallback } from 'react';
-import { useLocalizer } from '../localizer';
-
-export interface TextInputBoxProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSend: (value: string) => void;
-}
-
-const isSend = isHotkey('ctrl+enter');
-
-const AUTO_SIZE = { maxRows: 5 };
-
-export const InputTextBox = customize(
-  'InputTextBox',
-  memo((props: TextInputBoxProps) => {
-    const { value, onChange, onSend } = props;
-    const localizer = useLocalizer();
-
-    const onInputChange = useCallback(
-      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value),
-      [onChange],
-    );
-
-    const onKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (isSend(e)) {
-          onSend(value);
-        }
-      },
-      [onSend, value],
-    );
-
-    return (
-      <div className="wxchtf-text-input-box">
-        <Input.TextArea
-          value={value}
-          onChange={onInputChange}
-          autoSize={AUTO_SIZE}
-          className="wxchtf-text-input-textarea"
-          placeholder={localizer.input.placeholder()}
-          onKeyDown={onKeyDown}
-        />
-      </div>
-    );
-  }),
-);
+import { Input } from 'antd';
+import { customize } from '../customize';
+import isHotkey from 'is-hotkey';
+import { memo, useCallback } from 'react';
+import { useLocalizer } from '../localizer';
+
+export interface TextInputBoxProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (value: string) => void;
+}
+
+const isSend = isHotkey('ctrl+enter');
+
+const AUTO_SIZE = { maxRows: 5 };
+
+export const InputTextBox = customize(
+  'InputTextBox',
+  memo((props: TextInputBoxProps) => {
+    const { value, onChange, onSend } = props;
+    const localizer = useLocalizer();
+
+    const onInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const onKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (isSend(e)) {
+          onSend(value);
+        }
+      },
+      [onSend, value],
+    );
+
+    return (
+      <div className="wxchtf-text-input-box">
+        <Input.TextArea
+          value={value}
+          onChange={onInputChange}
+          autoSize={AUTO_SIZE}
+          className="wxchtf-text-input-textarea"
+          placeholder={localizer.input.placeholder()}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+    );
+  }),
+);

package/src/ui/InputBox/index.ts

@@ -1,4 +1,4 @@
-export * from './InputBox';
-export * from './InputFilesBox';
-export * from './InputSubmitButtonBox';
-export * from './InputTextBox';
+export * from './InputBox';
+export * from './InputFilesBox';
+export * from './InputSubmitButtonBox';
+export * from './InputTextBox';

package/src/ui/Layout/Aside.tsx

@@ -1,10 +1,10 @@
-import { customize } from '../customize';
-import { ChatList } from '../ChatList';
-
-export const Aside = customize('Aside', () => {
-  return (
-    <div className="wxchtf-aside">
-      <ChatList />
-    </div>
-  );
-});
+import { customize } from '../customize';
+import { ChatList } from '../ChatList';
+
+export const Aside = customize('Aside', () => {
+  return (
+    <div className="wxchtf-aside">
+      <ChatList />
+    </div>
+  );
+});

package/src/ui/Layout/Body.tsx

@@ -1,10 +1,10 @@
-import { customize } from '../customize';
-import { Aside } from './Aside';
-import { Main } from './Main';
-
-export const Body = customize('Body', () => (
-  <div className="wxchtf-body">
-    <Aside />
-    <Main />
-  </div>
-));
+import { customize } from '../customize';
+import { Aside } from './Aside';
+import { Main } from './Main';
+
+export const Body = customize('Body', () => (
+  <div className="wxchtf-body">
+    <Aside />
+    <Main />
+  </div>
+));

package/src/ui/Layout/Footer.tsx

@@ -1,3 +1,3 @@
-import { customize } from '../customize';
-
-export const Footer = customize('Footer', () => <div className="wxchtf-footer"></div>);
+import { customize } from '../customize';
+
+export const Footer = customize('Footer', () => <div className="wxchtf-footer"></div>);

package/src/ui/Layout/Header.tsx

@@ -1,10 +1,10 @@
-import { AddChatButton } from '../AddChatButton';
-import { customize } from '../customize';
-
-export const Header = customize('Header', () => {
-  return (
-    <div className="wxchtf-header">
-      <AddChatButton />
-    </div>
-  );
-});
+import { AddChatButton } from '../AddChatButton';
+import { customize } from '../customize';
+
+export const Header = customize('Header', () => {
+  return (
+    <div className="wxchtf-header">
+      <AddChatButton />
+    </div>
+  );
+});

package/src/ui/Layout/Main.tsx

@@ -1,15 +1,15 @@
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { CreateChatPanel } from '../CreateChatPanel';
-import { ChatPanel } from '../ChatPanel';
-
-export const Main = customize('Main', () => {
-  const { view, chatId } = useSelect((x) => ({ view: x.ui.view, chatId: x.ui.chatId }), []);
-
-  return (
-    <div className="wxchtf-main">
-      {view === 'chat' && chatId && <ChatPanel id={chatId} key={chatId} />}
-      {view === 'new-chat' && <CreateChatPanel />}
-    </div>
-  );
-});
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { CreateChatPanel } from '../CreateChatPanel';
+import { ChatPanel } from '../ChatPanel';
+
+export const Main = customize('Main', () => {
+  const { view, chatId } = useSelect((x) => ({ view: x.ui.view, chatId: x.ui.chatId }), []);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chatId && <ChatPanel id={chatId} key={chatId} />}
+      {view === 'new-chat' && <CreateChatPanel />}
+    </div>
+  );
+});

package/src/ui/Layout/index.ts

@@ -1,5 +1,5 @@
-export * from './Aside';
-export * from './Header';
-export * from './Footer';
-export * from './Main';
-export * from './Body';
+export * from './Aside';
+export * from './Header';
+export * from './Footer';
+export * from './Main';
+export * from './Body';

package/src/ui/Message/MessageAuthor.tsx

@@ -1,13 +1,13 @@
-import { customize } from '../customize';
-import { Avatar } from '../Avatar';
-import type { MessageBoxProps } from './MessageBox';
-
-export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
-  const { sentBy } = props.message;
-
-  return (
-    <div className="wxchtf-message-author">
-      <Avatar account={sentBy} />
-    </div>
-  );
-});
+import { customize } from '../customize';
+import { Avatar } from '../Avatar';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});

package/src/ui/Message/MessageBox.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react';
-import { Message } from '../../core';
-import { customize } from '../customize';
-import { MessageReadObserver } from '../MessageReadObserver';
-import { MessageRow } from './MessageRow';
-
-export interface MessageBoxProps {
-  message: Message;
-}
-
-export const MessageBox = customize('MessageBox', (props: MessageBoxProps) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  return (
-    <>
-      <MessageReadObserver messageRef={ref} {...props} />
-      <MessageRow containerRef={ref} {...props} />
-    </>
-  );
-});
+import { useRef } from 'react';
+import { Message } from '../../core';
+import { customize } from '../customize';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { MessageRow } from './MessageRow';
+
+export interface MessageBoxProps {
+  message: Message;
+}
+
+export const MessageBox = customize('MessageBox', (props: MessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <MessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/Message/MessageContent.tsx

@@ -1,13 +1,13 @@
-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>
-  );
-});
+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/MessageInfoBox.tsx

@@ -1,25 +1,25 @@
-import { useMe } from '../../ChatifyContext';
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
-import type { MessageBoxProps } from './MessageBox';
-
-export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
-  const { message } = props;
-  const { id, sentBy, sentAt } = message;
-  const me = useMe();
-  const my = sentBy.id === me;
-  const localizer = useLocalizer();
-  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
-
-  return (
-    <div className="wxchtf-message-info-box">
-      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {!my && (
-        <div className="wxchtf-message-read-box">
-          {reading ? localizer.message.reading() : localizer.message.read()}
-        </div>
-      )}
-    </div>
-  );
-});
+import { useMe } from '../../ChatifyContext';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
+  const { message } = props;
+  const { id, sentBy, sentAt } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {!my && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/ui/Message/MessageRow.tsx

@@ -1,24 +1,24 @@
-import { useMe } from '../../ChatifyContext';
-import { Ref } from 'react';
-import { customize } from '../customize';
-import { MessageAuthor } from './MessageAuthor';
-import { MessageContent } from './MessageContent';
-import { MessageBoxProps } from './MessageBox';
-
-export interface MessageRowProps extends MessageBoxProps {
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
-  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>
-  );
-});
+import { useMe } from '../../ChatifyContext';
+import { Ref } from 'react';
+import { customize } from '../customize';
+import { MessageAuthor } from './MessageAuthor';
+import { MessageContent } from './MessageContent';
+import { MessageBoxProps } from './MessageBox';
+
+export interface MessageRowProps extends MessageBoxProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
+  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>
+  );
+});

package/src/ui/Message/MessageText.tsx

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