@webinex/chatify 1.0.0-alpha08 → 1.0.0-rc1

package/src/ui/Message.tsx

@@ -1,118 +1,118 @@
-import { useMe } from '../ChatifyContext';
-import { FC, Ref, RefObject, useEffect, useMemo, useRef } from 'react';
-import { Message, useDispatch, useSelect } from '../core';
-import { customize } from '../util';
-import { useLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-
-export interface MessageBoxProps {
-  message: Message;
-}
-
-export interface MessageRowProps extends MessageBoxProps {
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export const MessageAuthor = customize<FC<MessageBoxProps>, string>('MessageAuthor', (props) => {
-  const { sentBy } = props.message;
-
-  return (
-    <div className="wxchtf-message-author">
-      <Avatar account={sentBy} />
-    </div>
-  );
-});
-
-export const MessageText = customize<FC<MessageBoxProps>, string>('MessageText', (props) => {
-  const { text } = props.message;
-  return <div className="wxchtf-message-text">{text}</div>;
-});
-
-export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInfoBox', (props) => {
-  const { message } = props;
-  const { id, sentBy, sentAt, read } = message;
-  const me = useMe();
-  const my = sentBy.id === me;
-  const localizer = useLocalizer();
-  const reading = useSelect((x) => x.read.queued.includes(id), []);
-
-  return (
-    <div className="wxchtf-message-info-box">
-      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {read !== undefined && !my && (
-        <div className="wxchtf-message-read-box">
-          {reading ? localizer.message.reading() : localizer.message.read()}
-        </div>
-      )}
-    </div>
-  );
-});
-
-export const MessageBody = customize<FC<MessageBoxProps>, string>('MessageBody', (props) => {
-  return (
-    <div className="wxchtf-message-body">
-      <MessageText {...props} />
-      <MessageInfoBox {...props} />
-    </div>
-  );
-});
-
-export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (props) => {
-  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} />
-      <MessageBody {...props} />
-    </div>
-  );
-});
-
-export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  return (
-    <>
-      <MessageReadObserver messageRef={ref} {...props} />
-      <MessageRow containerRef={ref} {...props} />
-    </>
-  );
-});
-
-export interface MessageReadObserverProps extends MessageBoxProps {
-  messageRef: RefObject<HTMLDivElement | null>;
-}
-
-export const MessageReadObserver = customize<FC<MessageReadObserverProps>, string>(
-  'MessageReadObserver',
-  (props) => {
-    const { message, messageRef } = props;
-    const dispatch = useDispatch();
-    const readRef = useRef(false);
-
-    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(messageRef.current!);
-      return () => observer.disconnect();
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [observer]);
-
-    return <></>;
-  },
-);
+import { useMe } from '../ChatifyContext';
+import { FC, Ref, RefObject, useEffect, useMemo, useRef } from 'react';
+import { Message, useDispatch, useSelect } from '../core';
+import { customize } from '../util';
+import { useLocalizer } from './localizer';
+import { Avatar } from './Avatar';
+
+export interface MessageBoxProps {
+  message: Message;
+}
+
+export interface MessageRowProps extends MessageBoxProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageAuthor = customize<FC<MessageBoxProps>, string>('MessageAuthor', (props) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});
+
+export const MessageText = customize<FC<MessageBoxProps>, string>('MessageText', (props) => {
+  const { text } = props.message;
+  return <div className="wxchtf-message-text">{text}</div>;
+});
+
+export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInfoBox', (props) => {
+  const { message } = props;
+  const { id, sentBy, sentAt, read } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const reading = useSelect((x) => x.read.queued.includes(id), []);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {read !== undefined && !my && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const MessageContent = customize<FC<MessageBoxProps>, string>('MessageContent', (props) => {
+  return (
+    <div className="wxchtf-message-content">
+      <MessageText {...props} />
+      <MessageInfoBox {...props} />
+    </div>
+  );
+});
+
+export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (props) => {
+  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>
+  );
+});
+
+export const MessageBox = customize<FC<MessageBoxProps>, string>('MessageBox', (props) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <MessageRow containerRef={ref} {...props} />
+    </>
+  );
+});
+
+export interface MessageReadObserverProps extends MessageBoxProps {
+  messageRef: RefObject<HTMLDivElement | null>;
+}
+
+export const MessageReadObserver = customize<FC<MessageReadObserverProps>, string>(
+  'MessageReadObserver',
+  (props) => {
+    const { message, messageRef } = props;
+    const dispatch = useDispatch();
+    const readRef = useRef(false);
+
+    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(messageRef.current!);
+      return () => observer.disconnect();
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observer]);
+
+    return <></>;
+  },
+);

package/src/ui/MessageSkeleton.tsx

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

@@ -1,50 +1,50 @@
-import { FC } from 'react';
-import { File } from '../core';
-import { customize } from '../util';
-import { useLocalizer } from './localizer';
-
-export interface SendingMessageProps {
-  text: string;
-  files: File[];
-}
-
-export const SendingMessageText = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageText',
-  (props) => {
-    const { text } = props;
-    return <div className="wxchtf-sending-message-text">{text}</div>;
-  },
-);
-
-export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageInfoBox',
-  () => {
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-sending-message-info-box">
-        <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
-      </div>
-    );
-  },
-);
-
-export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageBody',
-  (props) => {
-    return (
-      <div className="wxchtf-sending-message-body">
-        <SendingMessageText {...props} />
-        <SendingMessageInfoBox {...props} />
-      </div>
-    );
-  },
-);
-
-export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
-  return (
-    <div className="wxchtf-sending-message">
-      <SendingMessageBody {...props} />
-    </div>
-  );
-});
+import { FC } from 'react';
+import { File } from '../core';
+import { customize } from '../util';
+import { useLocalizer } from './localizer';
+
+export interface SendingMessageProps {
+  text: string;
+  files: File[];
+}
+
+export const SendingMessageText = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageText',
+  (props) => {
+    const { text } = props;
+    return <div className="wxchtf-sending-message-text">{text}</div>;
+  },
+);
+
+export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageInfoBox',
+  () => {
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-sending-message-info-box">
+        <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+      </div>
+    );
+  },
+);
+
+export const SendingMessageContent = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageContent',
+  (props) => {
+    return (
+      <div className="wxchtf-sending-message-content">
+        <SendingMessageText {...props} />
+        <SendingMessageInfoBox {...props} />
+      </div>
+    );
+  },
+);
+
+export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
+  return (
+    <div className="wxchtf-sending-message">
+      <SendingMessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/SystemMessage.tsx

@@ -1,26 +1,30 @@
-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>
-  );
-}
+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();
+  }
+
+  if (text.startsWith('chatify://member-added::')) {
+    return localizer.system.memberAdded();
+  }
+
+  return 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

@@ -1,11 +1,11 @@
-export * from './Chatify';
-export * from './Avatar';
-export * from './localizer';
-export * from './AddChatButton';
-export * from './Header';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatListItem';
-export * from './Message';
-export * from './SystemMessage';
-export * from './Icon';
+export * from './Chatify';
+export * from './Avatar';
+export * from './localizer';
+export * from './AddChatButton';
+export * from './Header';
+export * from './ChatHeader';
+export * from './ChatHeaderMembers';
+export * from './ChatListItem';
+export * from './Message';
+export * from './SystemMessage';
+export * from './Icon';

package/src/ui/localizer.tsx

@@ -1,66 +1,68 @@
-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;
-  };
-
-  input: {
-    placeholder: () => string;
-  };
-}
-
-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',
-  },
-
-  input: {
-    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
-  },
-};
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+
+export interface Localizer {
+  timestamp: (value: string) => string;
+  system: {
+    chatCreated: () => string;
+    memberAdded: () => 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;
+  };
+
+  input: {
+    placeholder: () => string;
+  };
+}
+
+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',
+    memberAdded: () => 'New member added',
+  },
+
+  input: {
+    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
+  },
+};