@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/src/ui/Conversation/InputBox/InputFilesBox.tsx

@@ -1,9 +1,78 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { Icon } from '../../common/Icon';
-
-export const InputFilesBox = customize('InputFilesBox', () => (
-  <div className="wxchtf-add-files-box">
-    <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
-  </div>
-));
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
+import { File } from '../../../core';
+import { useCallback, useEffect, useRef } from 'react';
+
+export interface InputFilesBoxProps {
+  value: File[];
+  accept?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  onAddedClick?: () => void;
+  onUpload: (value: globalThis.File[]) => void;
+}
+
+export const InputFileButton = customize('InputFileButton', (props: InputFilesBoxProps) => {
+  const { onUpload, onAddedClick, accept, loading, value, disabled } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const onClick = useCallback(() => inputRef.current?.click(), []);
+  const countButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    countButtonRef.current?.classList.add('active');
+  }, [value]);
+
+  const onCountButtonAnimationEnd = useCallback(() => {
+    countButtonRef.current?.classList.remove('active');
+  }, []);
+
+  const onInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      files && files.length > 0 && onUpload(Array.from(files));
+    },
+    [onUpload],
+  );
+
+  return (
+    <>
+      <Button
+        loading={loading}
+        onClick={onClick}
+        type="link"
+        disabled={disabled}
+        icon={<Icon type="attach" />}
+        className="wxchtf-add-files-btn"
+      />
+      {value.length > 0 && (
+        <Button
+          ref={countButtonRef}
+          className="wxchtf-add-files-added-btn"
+          onAnimationIteration={onCountButtonAnimationEnd}
+          onClick={onAddedClick}
+          type="link"
+          disabled={disabled}
+          icon={<>+{value.length}</>}
+        />
+      )}
+      <input
+        value=""
+        accept={accept}
+        onChange={onInputChange}
+        ref={inputRef}
+        type="file"
+        multiple
+        style={{ display: 'none' }}
+      />
+    </>
+  );
+});
+
+export const InputFilesBox = customize('InputFilesBox', (props: InputFilesBoxProps) => {
+  return (
+    <div className="wxchtf-add-files-box">
+      <InputFileButton {...props} />
+    </div>
+  );
+});

package/src/ui/Conversation/InputBox/InputSubmitButtonBox.tsx

@@ -1,17 +1,26 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { Icon } from '../../common/Icon';
-
-export interface InputSubmitButtonBoxProps {
-  onSubmit: () => void;
-}
-
-export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
-  const { onSubmit } = props;
-
-  return (
-    <div className="wxchtf-submit-btn-box">
-      <Button onClick={onSubmit} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
-    </div>
-  );
-});
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
+
+export interface InputSubmitButtonBoxProps {
+  onSubmit: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
+  const { onSubmit, disabled, loading } = props;
+
+  return (
+    <div className="wxchtf-submit-btn-box">
+      <Button
+        onClick={onSubmit}
+        type="link"
+        icon={<Icon type="send" />}
+        className="wxchtf-submit-btn"
+        disabled={disabled}
+        loading={loading}
+      />
+    </div>
+  );
+});

package/src/ui/Conversation/InputBox/InputTextBox.tsx

@@ -1,53 +1,61 @@
-import { Input } from 'antd';
-import { customize } from '../../customize';
-import isHotkey from 'is-hotkey';
-import { RefObject, memo, useCallback } from 'react';
-import { useLocalizer } from '../../localizer';
-import { TextAreaProps } from 'antd/es/input';
-
-export interface TextInputBoxProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSend: (value: string) => void;
-  inputRef?: RefObject<HTMLTextAreaElement>;
-}
-
-const isSend = isHotkey('ctrl+enter');
-
-const AUTO_SIZE: TextAreaProps['autoSize'] = { maxRows: 5, minRows: 1 };
-
-export const InputTextBox = customize(
-  'InputTextBox',
-  memo((props: TextInputBoxProps) => {
-    const { value, onChange, onSend, inputRef } = props;
-    const localizer = useLocalizer();
-
-    const onInputChange = useCallback(
-      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value),
-      [onChange],
-    );
-
-    const onKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (isSend(e)) {
-          onSend(value);
-        }
-      },
-      [onSend, value],
-    );
-
-    return (
-      <div className="wxchtf-text-input-box">
-        <Input.TextArea
-          ref={inputRef}
-          value={value}
-          onChange={onInputChange}
-          autoSize={AUTO_SIZE}
-          className="wxchtf-text-input-textarea"
-          placeholder={localizer.input.placeholder()}
-          onKeyDown={onKeyDown}
-        />
-      </div>
-    );
-  }),
-);
+import { Input } from 'antd';
+import { customize } from '../../customize';
+import { isHotkey } from 'is-hotkey';
+import { RefObject, memo, useCallback } from 'react';
+import { useLocalizer } from '../../localizer';
+import { TextAreaProps } from 'antd/es/input';
+
+export interface TextInputBoxProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (value: string) => void;
+  disabled?: boolean;
+  inputRef?: RefObject<HTMLTextAreaElement>;
+}
+
+const isEnter = isHotkey('enter');
+const isCtrlEnter = isHotkey('ctrl+enter');
+
+const AUTO_SIZE: TextAreaProps['autoSize'] = { maxRows: 5, minRows: 1 };
+
+export const InputTextBox = customize(
+  'InputTextBox',
+  memo((props: TextInputBoxProps) => {
+    const { value, onChange, onSend, disabled, inputRef } = props;
+    const localizer = useLocalizer();
+
+    const onInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const onKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+
+        if (isEnter(e) || isCtrlEnter(e)) {
+          e.preventDefault();
+          onSend(value);
+        }
+      },
+      [onSend, value, disabled],
+    );
+
+    return (
+      <div className="wxchtf-text-input-box">
+        <Input.TextArea
+          ref={inputRef}
+          value={value}
+          onChange={onInputChange}
+          autoSize={AUTO_SIZE}
+          className="wxchtf-text-input-textarea"
+          placeholder={localizer.input.placeholder()}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+    );
+  }),
+);

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

@@ -1,16 +1,23 @@
-import { InputBox } from './InputBox';
-import { InputFilesBox } from './InputFilesBox';
-import { InputSubmitButtonBox } from './InputSubmitButtonBox';
-import { InputTextBox } from './InputTextBox';
-
-export * from './InputBox';
-export * from './InputFilesBox';
-export * from './InputSubmitButtonBox';
-export * from './InputTextBox';
-
-export interface InputBoxCustomizeValue {
-  InputBox?: typeof InputBox.Component | null;
-  InputTextBox?: typeof InputTextBox.Component | null;
-  InputFilesBox?: typeof InputFilesBox.Component | null;
-  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
-}
+import { InputBox } from './InputBox';
+import { InputBoxFile } from './InputBoxFile';
+import { InputBoxFileList } from './InputBoxFileList';
+import { InputFileButton, InputFilesBox } from './InputFilesBox';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+import { InputTextBox } from './InputTextBox';
+
+export * from './InputBox';
+export * from './InputFilesBox';
+export * from './InputSubmitButtonBox';
+export * from './InputTextBox';
+export * from './InputBoxFileList';
+export * from './InputBoxFile';
+
+export interface InputBoxCustomizeValue {
+  InputBox?: typeof InputBox.Component | null;
+  InputTextBox?: typeof InputTextBox.Component | null;
+  InputFilesBox?: typeof InputFilesBox.Component | null;
+  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
+  InputBoxFileList?: typeof InputBoxFileList.Component | null;
+  InputBoxFile?: typeof InputBoxFile.Component | null;
+  InputFileButton?: typeof InputFileButton.Component | null;
+}

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

@@ -1,13 +1,13 @@
-import { customize } from '../../customize';
-import { Avatar } from '../../common/Avatar';
-import type { MessageBoxProps } from './MessageBox';
-
-export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
-  const { sentBy } = props.message;
-
-  return (
-    <div className="wxchtf-message-author">
-      <Avatar account={sentBy} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import { Avatar } from '../../common/Avatar';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});

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;
+}