@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha4

package/src/ui/Conversation/Message/MessageBox.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react';
-import { customize } from '../../customize';
-import { MessageReadObserver } from '../ReadObserver';
-import { MessageRow } from './MessageRow';
-import { MessageBase } from '../../../core';
-
-export interface MessageBoxProps {
-  message: MessageBase;
-}
-
-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 { customize } from '../../customize';
+import { MessageReadObserver } from '../ReadObserver';
+import { MessageRow } from './MessageRow';
+import { MessageBase } from '../../../core';
+
+export interface MessageBoxProps {
+  message: MessageBase;
+}
+
+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/Conversation/Message/MessageContent.tsx

@@ -1,11 +1,15 @@
-import { customize } from '../../customize';
-import { MessageText } from './MessageText';
-import type { MessageBoxProps } from './MessageBox';
-
-export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
-  return (
-    <div className="wxchtf-message-content">
-      <MessageText {...props} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { MessageText } from './MessageText';
+import type { MessageBoxProps } from './MessageBox';
+import { MessageFileList } from './MessageFileList';
+
+export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
+  const { files, text } = props.message;
+
+  return (
+    <div className="wxchtf-message-content">
+      {text && <MessageText {...props} />}
+      {files.length > 0 && <MessageFileList {...props} />}
+    </div>
+  );
+});

package/src/ui/Conversation/Message/MessageFile.tsx

@@ -0,0 +1,54 @@
+import { Button } from 'antd';
+import { File } from '../../../core';
+import { customize, useCustomizeContext } from '../../customize';
+import { useFormatter } from '../../useFormatter';
+import { Icon } from '../../common';
+import { ConversationCustomizeValue } from '../Conversation';
+import { useCallback, useState } from 'react';
+
+function open(url: string) {
+  const w = window.open(url, '_blank');
+  w?.focus();
+}
+
+export interface MessageFileProps {
+  file: File;
+}
+
+function useOpen(props: MessageFileProps) {
+  const { file } = props;
+  const { flippo } = useCustomizeContext<ConversationCustomizeValue>();
+  const [isOpenFetching, setIsOpenFetching] = useState(false);
+
+  const onOpen = useCallback(
+    () =>
+      flippo &&
+      Promise.resolve(setIsOpenFetching(true))
+        .then(() => flippo!.getSasUrl(file.ref))
+        .then(open)
+        .finally(() => setIsOpenFetching(false)),
+    [flippo, file.ref],
+  );
+
+  return [onOpen, { isOpenFetching }] as const;
+}
+
+export const MessageFile = customize('MessageFile', (props: MessageFileProps) => {
+  const { file } = props;
+  const formatter = useFormatter();
+  const [onOpen, { isOpenFetching }] = useOpen(props);
+
+  return (
+    <div className="wxchtf-file">
+      <div className="wxchtf-icon">
+        <Button loading={isOpenFetching} onClick={onOpen} type="link" icon={<Icon type="open-file" />} />
+      </div>
+      <div className="wxchtf-file-info">
+        <div className="wxchtf-name" title={file.name}>
+          {file.name}
+        </div>
+        <div className="wxchtf-size">{formatter.size(file.bytes)}</div>
+      </div>
+    </div>
+  );
+});

package/src/ui/Conversation/Message/MessageFileList.tsx

@@ -0,0 +1,14 @@
+import { customize } from '../../customize';
+import { MessageBoxProps } from './MessageBox';
+import { MessageFile } from './MessageFile';
+
+export const MessageFileList = customize('MessageFileList', (props: MessageBoxProps) => {
+  const { files } = props.message;
+  return (
+    <div className="wxchtf-file-list">
+      {files.map((file) => (
+        <MessageFile key={file.ref} file={file} />
+      ))}
+    </div>
+  );
+});

package/src/ui/Conversation/Message/MessageInfoBox.tsx

@@ -1,28 +1,28 @@
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-import { useConversation } from '../ConversationContext';
-import type { MessageBoxProps } from './MessageBox';
-
-export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
-  const { message } = props;
-  const { id, sentBy, sentAt } = message;
-  const { lastReadMessageId, isReading, noReadTracking } = useConversation();
-  const me = chatifyApi.settings.me();
-  const my = sentBy.id === me;
-  const localizer = useLocalizer();
-  const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
-  const reading = !isRead && isReading(id);
-
-  return (
-    <div className="wxchtf-message-info-box">
-      {!my && <div className="wxchtf-message-author-name">{sentBy.name},</div>}
-      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
-      {!my && !noReadTracking && (
-        <div className="wxchtf-message-read-box">
-          {reading ? localizer.message.reading() : localizer.message.read()}
-        </div>
-      )}
-    </div>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { useConversation } from '../ConversationContext';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
+  const { message } = props;
+  const { id, sentBy, sentAt } = message;
+  const { lastReadMessageId, isReading, noReadTracking } = useConversation();
+  const me = chatifyApi.settings.me();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
+  const reading = !isRead && isReading(id);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      {!my && <div className="wxchtf-message-author-name">{sentBy.name},</div>}
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {!my && !noReadTracking && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/ui/Conversation/Message/MessageRow.tsx

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

@@ -1,22 +1,28 @@
-import { MessageAuthor } from './MessageAuthor';
-import { MessageBox } from './MessageBox';
-import { MessageContent } from './MessageContent';
-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 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;
-}
+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/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>;
+});