@webinex/chatify 1.0.0-build2 → 1.0.0-rc2

package/src/ui/Chatify.tsx

@@ -1,106 +1,106 @@
-import { CSSProperties, FC } from 'react';
-import { useReadMonitor } from '../core';
-import { Aside } from './Aside';
-import { Main } from './Main';
-import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-import { CustomizeProvider } from '../util';
-import { ChatHeaderMembers } from './ChatHeaderMembers';
-import { ChatSettingsButton } from './ChatHeaderSettingsButton';
-import { Header } from './Header';
-import { AddChatButton } from './AddChatButton';
-import { Footer } from './Footer';
-import { ChatName } from './ChatName';
-import {
-  ChatListItemBox,
-  ChatListItemLastMessage,
-  ChatListItemLastMessageAuthor,
-  ChatListItemLastMessageContent,
-  ChatListItemName,
-  ChatListItemUnreadCount,
-} from './ChatListItem';
-import {
-  SendingMessage,
-  SendingMessageContent,
-  SendingMessageInfoBox,
-  SendingMessageText,
-} from './SendingMessage';
-import {
-  MessageAuthor,
-  MessageContent,
-  MessageBox,
-  MessageInfoBox,
-  MessageReadObserver,
-  MessageRow,
-  MessageText,
-} from './Message';
-import { Icon } from './Icon';
-import { SystemMessage } from './SystemMessage';
-
-export interface ChatifyCustomizeValue {
-  Avatar?: typeof Avatar.Component | null;
-  Header?: typeof Header.Component | null;
-  Footer?: typeof Footer.Component | null;
-  AddChatButton?: typeof AddChatButton.Component | null;
-  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
-  ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
-  ChatName?: typeof ChatName.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  SystemMessage?: typeof SystemMessage.Component | null;
-  SendingMessage?: typeof SendingMessage.Component | null;
-  SendingMessageBody?: typeof SendingMessageContent.Component | null;
-  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
-  SendingMessageText?: typeof SendingMessageText.Component | null;
-  MessageBox?: typeof MessageBox.Component | null;
-  MessageReadObserver?: typeof MessageReadObserver.Component | null;
-  MessageRow?: typeof MessageRow.Component | null;
-  MessageContent?: typeof MessageContent.Component | null;
-  MessageInfoBox?: typeof MessageInfoBox.Component | null;
-  MessageText?: typeof MessageText.Component | null;
-  MessageAuthor?: typeof MessageAuthor.Component | null;
-  Icon?: typeof Icon.Component | null;
-}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatifyCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  useReadMonitor();
-
-  return (
-    <div className={className + ' wxchtf-chatify'} style={style}>
-      <Header />
-      <div className="wxchtf-body">
-        <Aside />
-        <Main />
-      </div>
-      <Footer />
-    </div>
-  );
-}
-
-const EMPTY_CUSTOMIZE = {};
-
-export const Chatify: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = EMPTY_CUSTOMIZE } = props;
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeProvider value={customize}>
-        <Content {...props} />
-      </CustomizeProvider>
-    </LocalizerContext.Provider>
-  );
-};
-
-Chatify.displayName = 'Chatify';
+import { CSSProperties, FC } from 'react';
+import { useReadMonitor } from '../core';
+import { Aside } from './Aside';
+import { Main } from './Main';
+import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
+import { Avatar } from './Avatar';
+import { CustomizeProvider } from '../util';
+import { ChatHeaderMembers } from './ChatHeaderMembers';
+import { ChatSettingsButton } from './ChatHeaderSettingsButton';
+import { Header } from './Header';
+import { AddChatButton } from './AddChatButton';
+import { Footer } from './Footer';
+import { ChatName } from './ChatName';
+import {
+  ChatListItemBox,
+  ChatListItemLastMessage,
+  ChatListItemLastMessageAuthor,
+  ChatListItemLastMessageContent,
+  ChatListItemName,
+  ChatListItemUnreadCount,
+} from './ChatListItem';
+import {
+  SendingMessage,
+  SendingMessageContent,
+  SendingMessageInfoBox,
+  SendingMessageText,
+} from './SendingMessage';
+import {
+  MessageAuthor,
+  MessageContent,
+  MessageBox,
+  MessageInfoBox,
+  MessageReadObserver,
+  MessageRow,
+  MessageText,
+} from './Message';
+import { Icon } from './Icon';
+import { SystemMessage } from './SystemMessage';
+
+export interface ChatifyCustomizeValue {
+  Avatar?: typeof Avatar.Component | null;
+  Header?: typeof Header.Component | null;
+  Footer?: typeof Footer.Component | null;
+  AddChatButton?: typeof AddChatButton.Component | null;
+  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
+  ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
+  ChatName?: typeof ChatName.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  SystemMessage?: typeof SystemMessage.Component | null;
+  SendingMessage?: typeof SendingMessage.Component | null;
+  SendingMessageBody?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageReadObserver?: typeof MessageReadObserver.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+  MessageAuthor?: typeof MessageAuthor.Component | null;
+  Icon?: typeof Icon.Component | null;
+}
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatifyCustomizeValue;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  useReadMonitor();
+
+  return (
+    <div className={className + ' wxchtf-chatify'} style={style}>
+      <Header />
+      <div className="wxchtf-body">
+        <Aside />
+        <Main />
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+const EMPTY_CUSTOMIZE = {};
+
+export const Chatify: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = EMPTY_CUSTOMIZE } = props;
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <CustomizeProvider value={customize}>
+        <Content {...props} />
+      </CustomizeProvider>
+    </LocalizerContext.Provider>
+  );
+};
+
+Chatify.displayName = 'Chatify';

package/src/ui/Footer.tsx

@@ -1,7 +1,7 @@
-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);
+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 +1,14 @@
-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);
+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/Icon.tsx

@@ -1,21 +1,21 @@
-import { FC } from 'react';
-import { customize } from '../util';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
-
-export type IconType = 'attach' | 'send';
-
-export interface IconProps {
-  type: IconType;
-}
-
-export const ICONS: Record<IconType, React.ComponentType> = {
-  attach: FileAddOutlined,
-  send: SendOutlined,
-};
-
-export const Icon = customize<FC<IconProps>, string>('Icon', (props) => {
-  const { type } = props;
-  const IconComponent = ICONS[type];
-  return IconComponent ? <IconComponent /> : null;
-});
+import { FC } from 'react';
+import { customize } from '../util';
+import SendOutlined from '@ant-design/icons/SendOutlined';
+import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
+
+export type IconType = 'attach' | 'send';
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS: Record<IconType, React.ComponentType> = {
+  attach: FileAddOutlined,
+  send: SendOutlined,
+};
+
+export const Icon = customize<FC<IconProps>, string>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/InputForm.tsx

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

@@ -1,40 +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} />;
-}
+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

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