@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha3

package/src/ui/{Message → Conversation/Message}/MessageRow.tsx

@@ -1,28 +1,28 @@
-import { useMe } from '../../ChatifyContext';
-import { Ref } from 'react';
-import { customize } from '../customize';
-import { MessageAuthor } from './MessageAuthor';
-import { MessageContent } from './MessageContent';
-import { MessageBoxProps } from './MessageBox';
-import { MessageInfoBox } from './MessageInfoBox';
-
-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} />
-      <div>
-        <MessageInfoBox {...props} />
-        <MessageContent {...props} />
-      </div>
-    </div>
-  );
-});
+import { Ref } from 'react';
+import { customize } from '../../customize';
+import { MessageAuthor } from './MessageAuthor';
+import { MessageContent } from './MessageContent';
+import { MessageBoxProps } from './MessageBox';
+import { MessageInfoBox } from './MessageInfoBox';
+import { chatifyApi } from '../../../core';
+
+export interface MessageRowProps extends MessageBoxProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
+  const { message, containerRef } = props;
+  const { sentBy } = message;
+  const me = chatifyApi.settings.me();
+  const my = sentBy.id === me;
+
+  return (
+    <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
+      <MessageAuthor {...props} />
+      <div>
+        <MessageInfoBox {...props} />
+        <MessageContent {...props} />
+      </div>
+    </div>
+  );
+});

package/src/ui/{Message → Conversation/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>;
+});

package/src/ui/Conversation/Message/index.ts

@@ -0,0 +1,28 @@
+import { MessageAuthor } from './MessageAuthor';
+import { MessageBox } from './MessageBox';
+import { MessageContent } from './MessageContent';
+import { MessageFile } from './MessageFile';
+import { MessageFileList } from './MessageFileList';
+import { MessageInfoBox } from './MessageInfoBox';
+import { MessageRow } from './MessageRow';
+import { MessageText } from './MessageText';
+
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';
+export * from './MessageFileList';
+export * from './MessageFile';
+
+export interface MessageCustomizeValue {
+  MessageAuthor?: typeof MessageAuthor.Component | null;
+  MessageBox?: typeof MessageBox.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
+  MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
+  MessageText?: typeof MessageText.Component | null;
+  MessageFileList?: typeof MessageFileList.Component | null;
+  MessageFile?: typeof MessageFile.Component | null;
+}

package/src/ui/{Next.tsx → Conversation/NextObserver/NextMessagesObserver.tsx}

@@ -1,48 +1,47 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFetchNextMutation } from '../core';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export interface NextProps {
-  chatId: string;
-}
-
-export function Next(props: NextProps) {
-  const { chatId } = props;
-  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
-  const [intersecting, setIntersecting] = useState(false);
-  const ref = useRef<HTMLDivElement | null>(null);
-  const timerRef = useRef<NodeJS.Timer>();
-
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting) {
-          timerRef.current = setTimeout(() => setIntersecting(true), 200);
-        } else {
-          clearTimeout(timerRef.current!);
-        }
-      }),
-    [],
-  );
-
-  useEffect(() => {
-    observer.observe(ref.current!);
-    return () => observer.disconnect();
-  }, [observer]);
-
-  useEffect(() => {
-    if (!intersecting) {
-      return;
-    }
-
-    fetchNext();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intersecting]);
-
-  if (isFetching || intersecting) {
-    return <MessageSkeleton count={4} />;
-  }
-
-  return <div className="wxchtf-next" ref={ref}></div>;
-}
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { MessageSkeleton } from '../../common/MessageSkeleton';
+
+export interface NextMessagesObserverProps {
+  onLoad: () => void;
+  loading: boolean;
+}
+
+export function NextMessagesObserver(props: NextMessagesObserverProps) {
+  const { onLoad, loading } = props;
+  const [intersecting, setIntersecting] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<number>();
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          timerRef.current = window.setTimeout(() => setIntersecting(true), 200);
+        } else {
+          clearTimeout(timerRef.current!);
+        }
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(ref.current!);
+    return () => observer.disconnect();
+  }, [observer]);
+
+  useEffect(() => {
+    if (!intersecting) {
+      return;
+    }
+
+    onLoad();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intersecting]);
+
+  if (loading || intersecting) {
+    return <MessageSkeleton count={4} />;
+  }
+
+  return <div className="wxchtf-next" ref={ref} />;
+}

package/src/ui/Conversation/NextObserver/index.ts

@@ -0,0 +1 @@
+export * from './NextMessagesObserver';

package/src/ui/{MessageReadObserver.tsx → Conversation/ReadObserver/MessageReadObserver.tsx}

@@ -1,45 +1,49 @@
-import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelect } from '../core';
-import { customize } from './customize';
-import { MessageBoxProps } from './Message/MessageBox';
-
-export interface MessageReadObserverProps extends MessageBoxProps {
-  messageRef: RefObject<HTMLDivElement | null>;
-}
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
-  const { message, messageRef } = props;
-  const dispatch = useDispatch();
-  const isRead = useSelect((x) => {
-    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
-    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
-  }, []);
-
-  const readRef = useRef(isRead);
-
-  useEffect(() => {
-    readRef.current = readRef.current || isRead;
-  }, [isRead]);
-
-  const observer = useMemo(
-    () =>
-      new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting && !readRef.current) {
-          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 <></>;
-});
+import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
+import { MessageBoxProps } from '../Message';
+import { useConversation } from '../ConversationContext';
+
+export interface MessageReadObserverProps extends MessageBoxProps {
+  messageRef: RefObject<HTMLDivElement | null>;
+}
+const Observer: FC<MessageReadObserverProps> = (props) => {
+  const { message, messageRef } = props;
+  const { onRead, lastReadMessageId } = useConversation();
+  const isRead = lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
+  const readRef = useRef(isRead);
+
+  useEffect(() => {
+    readRef.current = readRef.current || isRead;
+  }, [isRead]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && !readRef.current) {
+          readRef.current = true;
+          onRead(message.id);
+        }
+      }),
+
+    // 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 <></>;
+};
+
+export function MessageReadObserver(props: MessageReadObserverProps) {
+  const { noReadTracking } = useConversation();
+
+  if (noReadTracking === true) {
+    return null;
+  }
+
+  return <Observer {...props} />;
+}

package/src/ui/Conversation/ReadObserver/index.ts

@@ -0,0 +1 @@
+export * from './MessageReadObserver';

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageBox.tsx

@@ -1,16 +1,16 @@
-import { File } from '../../core';
-import { customize } from '../customize';
-import { SendingMessageContent } from './SendingMessageContent';
-
-export interface SendingMessageBoxProps {
-  text: string;
-  files: File[];
-}
-
-export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
-  return (
-    <div className="wxchtf-sending-message">
-      <SendingMessageContent {...props} />
-    </div>
-  );
-});
+import { File } from '../../../core';
+import { customize } from '../../customize';
+import { SendingMessageContent } from './SendingMessageContent';
+
+export interface SendingMessageBoxProps {
+  text: string;
+  files: File[];
+}
+
+export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message">
+      <SendingMessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageContent.tsx

@@ -1,13 +1,13 @@
-import { customize } from '../customize';
-import { SendingMessageText } from './SendingMessageText';
-import { SendingMessageInfoBox } from './SendingMessageInfoBox';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
-  return (
-    <div className="wxchtf-sending-message-content">
-      <SendingMessageText {...props} />
-      <SendingMessageInfoBox {...props} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { SendingMessageText } from './SendingMessageText';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message-content">
+      <SendingMessageText {...props} />
+      <SendingMessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageInfoBox.tsx

@@ -1,13 +1,13 @@
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
-  const localizer = useLocalizer();
-
-  return (
-    <div className="wxchtf-sending-message-info-box">
-      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
+  const localizer = useLocalizer();
+
+  return (
+    <div className="wxchtf-sending-message-info-box">
+      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+    </div>
+  );
+});

package/src/ui/{SendingMessage → Conversation/SendingMessage}/SendingMessageText.tsx

@@ -1,7 +1,7 @@
-import { customize } from '../customize';
-import type { SendingMessageBoxProps } from './SendingMessageBox';
-
-export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
-  const { text } = props;
-  return <div className="wxchtf-sending-message-text">{text}</div>;
-});
+import { customize } from '../../customize';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
+  const { text } = props;
+  return <div className="wxchtf-sending-message-text">{text}</div>;
+});

package/src/ui/Conversation/SendingMessage/index.ts

@@ -0,0 +1,16 @@
+import { SendingMessageBox } from './SendingMessageBox';
+import { SendingMessageContent } from './SendingMessageContent';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import { SendingMessageText } from './SendingMessageText';
+
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';
+
+export interface SendingMessageCustomizeValue {
+  SendingMessageBox?: typeof SendingMessageBox.Component | null;
+  SendingMessageContent?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+}

package/src/ui/{SystemMessage → Conversation/SystemMessage}/SystemMessageBox.tsx

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

package/src/ui/Conversation/SystemMessage/SystemMessageRow.tsx

@@ -0,0 +1,28 @@
+import { Ref } from 'react';
+import { customize } from '../../customize';
+import { Localizer, useLocalizer } from '../../localizer';
+import { MessageBase } from '../../../core';
+
+export interface SystemMessageRowProps {
+  message: MessageBase;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  const [key, payload] = text.split('::', 2);
+  const data = payload ? JSON.parse(payload) : null;
+  return localizer.system[key as keyof Localizer['system']](key as any, data);
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{text && formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/Conversation/SystemMessage/index.ts

@@ -0,0 +1,10 @@
+import { SystemMessageBox } from './SystemMessageBox';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';
+
+export interface SystemMessageCustomizeValue {
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+}

package/src/ui/Conversation/index.ts

@@ -0,0 +1,13 @@
+export * from './InputBox';
+export * from './Message';
+export * from './NextObserver';
+export * from './ReadObserver';
+export * from './SendingMessage';
+export * from './SystemMessage';
+
+export * from './ConversationActions';
+export * from './ConversationBody';
+export * from './ConversationHeader';
+export * from './ConversationName';
+export * from './ConversationContext';
+export * from './Conversation';

package/src/ui/Thread/ThreadActions.tsx

@@ -0,0 +1,22 @@
+import { Button, Tooltip } from 'antd';
+import { customize } from '../customize';
+import { useThreadContext } from './ThreadContext';
+import { Icon } from '../common/Icon';
+
+export const ThreadActions = customize('ThreadActions', () => {
+  const { watch, onWatch } = useThreadContext();
+
+  if (!watch) {
+    return (
+      <Tooltip title="Watch thread">
+        <Button type="link" icon={<Icon type="watch" />} onClick={() => onWatch(true)} />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title="Unwatch thread">
+      <Button type="link" icon={<Icon type="unwatch" />} onClick={() => onWatch(false)} />
+    </Tooltip>
+  );
+});

package/src/ui/Thread/ThreadContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface ThreadContextValue {
+  id: string;
+  watch: boolean;
+  onWatch: (value: boolean) => void;
+}
+
+export const ThreadContext = React.createContext<ThreadContextValue>(null!);
+
+export function useThreadContext() {
+  return React.useContext(ThreadContext);
+}