@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

package/src/ui/Conversation/ConversationActions.tsx

@@ -1,12 +1,12 @@
-import { Button } from 'antd';
-import { customize } from '../customize';
-import { useConversation } from './ConversationContext';
-import { Icon } from '../common';
-
-export const ConversationActions = customize('ConversationActions', () => {
-  const { onClose } = useConversation();
-
-  if (!onClose) return null;
-
-  return <Button onClick={onClose} type="link" icon={<Icon type="close" />} />;
-});
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+import { Icon } from '../common';
+
+export const ConversationActions = customize('ConversationActions', () => {
+  const { onClose } = useConversation();
+
+  if (!onClose) return null;
+
+  return <Button onClick={onClose} type="link" icon={<Icon type="close" />} />;
+});

package/src/ui/Conversation/ConversationBody.tsx

@@ -1,28 +1,28 @@
-import { MessageBox } from './Message';
-import { NextMessagesObserver } from './NextObserver';
-import { SystemMessageBox } from './SystemMessage';
-import { MessageSkeleton } from '../common/MessageSkeleton';
-import { customize } from '../customize';
-import { SYSTEM_ID } from '../../core';
-import { useConversation } from './ConversationContext';
-
-// TODO: Add sending message box
-export const ConversationBody = customize('ConversationBody', () => {
-  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
-
-  return (
-    <div className="wxchtf-conversation-body">
-      {!messages && <MessageSkeleton count={5} />}
-
-      {messages?.map((x) => {
-        if (x.sentBy.id === SYSTEM_ID) {
-          return <SystemMessageBox key={x.id} message={x} />;
-        }
-
-        return <MessageBox message={x} key={x.id} />;
-      })}
-
-      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
-    </div>
-  );
-});
+import { MessageBox } from './Message';
+import { NextMessagesObserver } from './NextObserver';
+import { SystemMessageBox } from './SystemMessage';
+import { MessageSkeleton } from '../common/MessageSkeleton';
+import { customize } from '../customize';
+import { SYSTEM_ID } from '../../core';
+import { useConversation } from './ConversationContext';
+
+// TODO: Add sending message box
+export const ConversationBody = customize('ConversationBody', () => {
+  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
+
+  return (
+    <div className="wxchtf-conversation-body">
+      {!messages && <MessageSkeleton count={5} />}
+
+      {messages?.map((x) => {
+        if (x.sentBy.id === SYSTEM_ID) {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        return <MessageBox message={x} key={x.id} />;
+      })}
+
+      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationContext.ts

@@ -1,30 +1,31 @@
-import React from 'react';
-import { MessageBase, MessageBody } from '../../core';
-import type { Flippo } from '@webinex/flippo';
-
-export interface ConversationValue {
-  id: string;
-  name: string;
-  active: boolean;
-  lastReadMessageId: string | null;
-}
-
-export interface ConversationContextValue extends ConversationValue {
-  messages?: MessageBase[];
-  hasMore?: boolean;
-  nextLoading: boolean;
-  noReadTracking?: boolean;
-
-  isReading?: (id: string) => boolean;
-  onNext: () => void;
-  onSend?: (message: MessageBody) => void;
-  onRead?: (id: string) => void;
-  flippo?: Flippo;
-  onClose?: () => void;
-}
-
-export const ConversationContext = React.createContext<ConversationContextValue>(undefined!);
-
-export function useConversation() {
-  return React.useContext(ConversationContext);
-}
+import React from 'react';
+import { MessageBase, MessageBody } from '../../core';
+import type { Flippo } from '@webinex/flippo';
+
+export interface ConversationValue {
+  id: string;
+  name: string;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface ConversationContextValue extends ConversationValue {
+  messages?: MessageBase[];
+  hasMore?: boolean;
+  nextLoading: boolean;
+  noReadTracking?: boolean;
+  compact: boolean;
+
+  isReading?: (id: string) => boolean;
+  onNext: () => void;
+  onSend?: (message: MessageBody) => void;
+  onRead?: (id: string) => void;
+  flippo?: Flippo;
+  onClose?: () => void;
+}
+
+export const ConversationContext = React.createContext<ConversationContextValue>(undefined!);
+
+export function useConversation() {
+  return React.useContext(ConversationContext);
+}

package/src/ui/Conversation/ConversationHeader.tsx

@@ -1,19 +1,35 @@
-import { Col, Row } from 'antd';
-import { customize } from '../customize';
-import { ConversationName } from './ConversationName';
-import { ConversationActions } from './ConversationActions';
-
-export const ConversationHeader = customize('ConversationHeader', () => {
-  return (
-    <div className="wxchtf-conversation-header">
-      <Row justify="space-between" align="middle">
-        <Col>
-          <ConversationName />
-        </Col>
-        <Col className="wxchtf-conversation-actions">
-          <ConversationActions />
-        </Col>
-      </Row>
-    </div>
-  );
-});
+import { Button, Col, Row } from 'antd';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationActions } from './ConversationActions';
+import { LeftOutlined } from '@ant-design/icons';
+
+export interface ConversationHeaderProps {
+  onBackClick?: () => void;
+}
+
+export const ConversationHeader = customize('ConversationHeader', (props: ConversationHeaderProps) => {
+  const { onBackClick } = props;
+
+  return (
+    <div className="wxchtf-conversation-header">
+      <Row gutter={10}>
+        {onBackClick && (
+          <Col flex="none">
+            <Button type="text" icon={<LeftOutlined />} onClick={onBackClick} />
+          </Col>
+        )}
+        <Col flex="auto">
+          <Row justify="space-between" align="middle">
+            <Col>
+              <ConversationName />
+            </Col>
+            <Col className="wxchtf-conversation-actions">
+              <ConversationActions />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationName.tsx

@@ -1,7 +1,7 @@
-import { customize } from '../customize';
-import { useConversation } from './ConversationContext';
-
-export const ConversationName = customize('ConversationName', () => {
-  const { name } = useConversation();
-  return <span className="wxchtf-conversation-name">{name}</span>;
-});
+import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+
+export const ConversationName = customize('ConversationName', () => {
+  const { name } = useConversation();
+  return <span className="wxchtf-conversation-name">{name}</span>;
+});

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

@@ -1,126 +1,126 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { InputFilesBox } from './InputFilesBox';
-import { File } from '../../../core';
-import { InputTextBox } from './InputTextBox';
-import { customize, useCustomizeContext } from '../../customize';
-import { InputSubmitButtonBox } from './InputSubmitButtonBox';
-import { useConversation } from '../ConversationContext';
-import { ConversationCustomizeValue } from '../Conversation';
-import { InputBoxFileList } from './InputBoxFileList';
-
-function useFormState() {
-  const { onSend } = useConversation();
-  const [text, setText] = useState('');
-  const [sending, setSending] = useState(false);
-  const { onUpload, files, loading, setFiles, showFileBox, onDeleteFile } = useFlippoInputFileBox();
-
-  const onSubmit = useCallback(() => {
-    if (!onSend) {
-      return;
-    }
-
-    const textValue = text.trim().length === 0 ? null : text.trim();
-
-    if ((!textValue && files.length === 0) || loading) {
-      return;
-    }
-
-    setSending(true);
-    Promise.resolve(onSend({ text: textValue, files }))
-      .finally(() => setSending(false))
-      .then(() => {
-        setFiles([]);
-        setText('');
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text, onSend, files, setFiles, loading]);
-
-  return [onSubmit, { text, setText, files, onUpload, loading, showFileBox, onDeleteFile, sending }] as const;
-}
-
-function useFlippoInputFileBox() {
-  const [loading, setLoading] = useState(false);
-  const [files, setFiles] = useState<File[]>([]);
-  const { flippo } = useCustomizeContext<ConversationCustomizeValue>();
-
-  const onUpload = useCallback(
-    (files: globalThis.File[]) => {
-      if (!flippo) return;
-
-      setLoading(true);
-      Promise.all(files.map((file) => flippo.store(file)))
-        .then((references) =>
-          setFiles((prev) => [
-            ...prev,
-            ...references.map((reference, index) => ({
-              name: files[index].name,
-              ref: reference,
-              bytes: files[index].size,
-            })),
-          ]),
-        )
-        .finally(() => setLoading(false));
-    },
-    [flippo],
-  );
-
-  const onDeleteFile = useCallback((file: File) => {
-    setFiles((prev) => prev.filter((f) => f !== file));
-  }, []);
-
-  return { onUpload, files, loading, setFiles, showFileBox: !!flippo, onDeleteFile };
-}
-
-export const InputBox = customize('InputBox', () => {
-  const [onSend, { text, setText, files, loading, onUpload, showFileBox, onDeleteFile, sending }] =
-    useFormState();
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [showFileList, setShowFileList] = useState(false);
-  const toggleShowFileList = useCallback(() => setShowFileList((prev) => !prev), []);
-  const prevFilesLength = useRef(files.length);
-
-  useLayoutEffect(() => inputRef.current?.focus(), []);
-
-  useEffect(() => {
-    if (prevFilesLength.current === 0 && files.length > 0 && !showFileList) {
-      setShowFileList(true);
-    }
-
-    prevFilesLength.current = files.length;
-
-    if (files.length === 0 && showFileList) {
-      setShowFileList(false);
-    }
-  }, [files, showFileList]);
-
-  return (
-    <div className="wxchtf-input-form">
-      <div className="wxchtf-input-box">
-        {showFileList && (
-          <div className="wxchtf-file-list-box">
-            <InputBoxFileList files={files} onDelete={onDeleteFile} disabled={sending} />
-          </div>
-        )}
-        <div className="wxchtf-input-box-row">
-          {showFileBox && (
-            <InputFilesBox
-              onAddedClick={toggleShowFileList}
-              onUpload={onUpload}
-              value={files}
-              loading={loading}
-              disabled={sending}
-            />
-          )}
-          <InputTextBox
-            value={text}
-            onSend={onSend}
-            onChange={setText}
-            disabled={sending}
-            inputRef={inputRef}
-          />
-          <InputSubmitButtonBox onSubmit={onSend} disabled={loading} loading={sending} />
-        </div>
-      </div>
-    </div>
-  );
-});
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { InputFilesBox } from './InputFilesBox';
+import { File } from '../../../core';
+import { InputTextBox } from './InputTextBox';
+import { customize, useCustomizeContext } from '../../customize';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+import { useConversation } from '../ConversationContext';
+import { ConversationCustomizeValue } from '../Conversation';
+import { InputBoxFileList } from './InputBoxFileList';
+
+function useFormState() {
+  const { onSend } = useConversation();
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+  const { onUpload, files, loading, setFiles, showFileBox, onDeleteFile } = useFlippoInputFileBox();
+
+  const onSubmit = useCallback(() => {
+    if (!onSend) {
+      return;
+    }
+
+    const textValue = text.trim().length === 0 ? null : text.trim();
+
+    if ((!textValue && files.length === 0) || loading) {
+      return;
+    }
+
+    setSending(true);
+    Promise.resolve(onSend({ text: textValue, files }))
+      .finally(() => setSending(false))
+      .then(() => {
+        setFiles([]);
+        setText('');
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, onSend, files, setFiles, loading]);
+
+  return [onSubmit, { text, setText, files, onUpload, loading, showFileBox, onDeleteFile, sending }] as const;
+}
+
+function useFlippoInputFileBox() {
+  const [loading, setLoading] = useState(false);
+  const [files, setFiles] = useState<File[]>([]);
+  const { flippo } = useCustomizeContext<ConversationCustomizeValue>();
+
+  const onUpload = useCallback(
+    (files: globalThis.File[]) => {
+      if (!flippo) return;
+
+      setLoading(true);
+      Promise.all(files.map((file) => flippo.store(file)))
+        .then((references) =>
+          setFiles((prev) => [
+            ...prev,
+            ...references.map((reference, index) => ({
+              name: files[index].name,
+              ref: reference,
+              bytes: files[index].size,
+            })),
+          ]),
+        )
+        .finally(() => setLoading(false));
+    },
+    [flippo],
+  );
+
+  const onDeleteFile = useCallback((file: File) => {
+    setFiles((prev) => prev.filter((f) => f !== file));
+  }, []);
+
+  return { onUpload, files, loading, setFiles, showFileBox: !!flippo, onDeleteFile };
+}
+
+export const InputBox = customize('InputBox', () => {
+  const [onSend, { text, setText, files, loading, onUpload, showFileBox, onDeleteFile, sending }] =
+    useFormState();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [showFileList, setShowFileList] = useState(false);
+  const toggleShowFileList = useCallback(() => setShowFileList((prev) => !prev), []);
+  const prevFilesLength = useRef(files.length);
+
+  useLayoutEffect(() => inputRef.current?.focus(), []);
+
+  useEffect(() => {
+    if (prevFilesLength.current === 0 && files.length > 0 && !showFileList) {
+      setShowFileList(true);
+    }
+
+    prevFilesLength.current = files.length;
+
+    if (files.length === 0 && showFileList) {
+      setShowFileList(false);
+    }
+  }, [files, showFileList]);
+
+  return (
+    <div className="wxchtf-input-form">
+      <div className="wxchtf-input-box">
+        {showFileList && (
+          <div className="wxchtf-file-list-box">
+            <InputBoxFileList files={files} onDelete={onDeleteFile} disabled={sending} />
+          </div>
+        )}
+        <div className="wxchtf-input-box-row">
+          {showFileBox && (
+            <InputFilesBox
+              onAddedClick={toggleShowFileList}
+              onUpload={onUpload}
+              value={files}
+              loading={loading}
+              disabled={sending}
+            />
+          )}
+          <InputTextBox
+            value={text}
+            onSend={onSend}
+            onChange={setText}
+            disabled={sending}
+            inputRef={inputRef}
+          />
+          <InputSubmitButtonBox onSubmit={onSend} disabled={loading} loading={sending} />
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -1,38 +1,38 @@
-import { Button } from 'antd';
-import { File } from '../../../core';
-import { Icon } from '../../common';
-import { useCallback } from 'react';
-import { useFormatter } from '../../useFormatter';
-import { customize } from '../../customize';
-
-export interface InputBoxFileProps {
-  file: File;
-  disabled?: boolean;
-  onDelete: (file: File) => void;
-}
-
-export const InputBoxFile = customize('InputBoxFile', (props: InputBoxFileProps) => {
-  const { file, disabled, onDelete } = props;
-  const formatter = useFormatter();
-  const onDeleteClick = useCallback(() => onDelete(file), [file, onDelete]);
-
-  return (
-    <div className="wxchtf-file">
-      <div className="wxchtf-file-info">
-        <div className="wxchtf-file-name" title={file.name}>
-          {file.name}
-        </div>
-        <div className="wxchtf-file-size">{formatter.size(file.bytes)}</div>
-      </div>
-      <div className="wxchtf-file-actions">
-        <Button
-          disabled={disabled}
-          className="wxchtf-delete"
-          type="link"
-          icon={<Icon type="delete-file" />}
-          onClick={onDeleteClick}
-        />
-      </div>
-    </div>
-  );
-});
+import { Button } from 'antd';
+import { File } from '../../../core';
+import { Icon } from '../../common';
+import { useCallback } from 'react';
+import { useFormatter } from '../../useFormatter';
+import { customize } from '../../customize';
+
+export interface InputBoxFileProps {
+  file: File;
+  disabled?: boolean;
+  onDelete: (file: File) => void;
+}
+
+export const InputBoxFile = customize('InputBoxFile', (props: InputBoxFileProps) => {
+  const { file, disabled, onDelete } = props;
+  const formatter = useFormatter();
+  const onDeleteClick = useCallback(() => onDelete(file), [file, onDelete]);
+
+  return (
+    <div className="wxchtf-file">
+      <div className="wxchtf-file-info">
+        <div className="wxchtf-file-name" title={file.name}>
+          {file.name}
+        </div>
+        <div className="wxchtf-file-size">{formatter.size(file.bytes)}</div>
+      </div>
+      <div className="wxchtf-file-actions">
+        <Button
+          disabled={disabled}
+          className="wxchtf-delete"
+          type="link"
+          icon={<Icon type="delete-file" />}
+          onClick={onDeleteClick}
+        />
+      </div>
+    </div>
+  );
+});

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

@@ -1,21 +1,21 @@
-import { File } from '../../../core';
-import { customize } from '../../customize';
-import { InputBoxFile } from './InputBoxFile';
-
-export interface InputBoxFileListProps {
-  files: File[];
-  disabled?: boolean;
-  onDelete: (file: File) => void;
-}
-
-export const InputBoxFileList = customize('InputBoxFileList', (props: InputBoxFileListProps) => {
-  const { files, onDelete, disabled } = props;
-
-  return (
-    <div className="wxchtf-file-list">
-      {files.map((file) => (
-        <InputBoxFile key={file.ref} file={file} onDelete={onDelete} disabled={disabled} />
-      ))}
-    </div>
-  );
-});
+import { File } from '../../../core';
+import { customize } from '../../customize';
+import { InputBoxFile } from './InputBoxFile';
+
+export interface InputBoxFileListProps {
+  files: File[];
+  disabled?: boolean;
+  onDelete: (file: File) => void;
+}
+
+export const InputBoxFileList = customize('InputBoxFileList', (props: InputBoxFileListProps) => {
+  const { files, onDelete, disabled } = props;
+
+  return (
+    <div className="wxchtf-file-list">
+      {files.map((file) => (
+        <InputBoxFile key={file.ref} file={file} onDelete={onDelete} disabled={disabled} />
+      ))}
+    </div>
+  );
+});