@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/src/ui/Conversation/NextObserver/NextMessagesObserver.tsx

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

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

package/src/ui/Conversation/ReadObserver/MessageReadObserver.tsx

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

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

package/src/ui/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/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/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/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

@@ -1,16 +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;
-}
+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/Conversation/SystemMessage/SystemMessageBox.tsx

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

@@ -1,28 +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">{formatSystemMessage(localizer, text)}</div>
-      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
-    </div>
-  );
-});
+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

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

@@ -1,13 +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';
+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

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

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