@webinex/chatify 2.0.1-alpha2 → 2.0.2-alpha2

package/dist/esm/types/ui/Conversation/InputBox/InputBoxFile.d.ts

@@ -2,6 +2,7 @@
 import { File } from '../../../core';
 export interface InputBoxFileProps {
     file: File;
+    disabled?: boolean;
     onDelete: (file: File) => void;
 }
 export declare const InputBoxFile: import("../../customize").Customizable<import("react").ComponentType<InputBoxFileProps>>;

package/dist/esm/types/ui/Conversation/InputBox/InputBoxFileList.d.ts

@@ -2,6 +2,7 @@
 import { File } from '../../../core';
 export interface InputBoxFileListProps {
     files: File[];
+    disabled?: boolean;
     onDelete: (file: File) => void;
 }
 export declare const InputBoxFileList: import("../../customize").Customizable<import("react").ComponentType<InputBoxFileListProps>>;

package/dist/esm/types/ui/Conversation/InputBox/InputFilesBox.d.ts

@@ -4,6 +4,7 @@ export interface InputFilesBoxProps {
     value: File[];
     accept?: string;
     loading?: boolean;
+    disabled?: boolean;
     onAddedClick?: () => void;
     onUpload: (value: globalThis.File[]) => void;
 }

package/dist/esm/types/ui/Conversation/InputBox/InputSubmitButtonBox.d.ts

@@ -2,5 +2,6 @@
 export interface InputSubmitButtonBoxProps {
     onSubmit: () => void;
     disabled?: boolean;
+    loading?: boolean;
 }
 export declare const InputSubmitButtonBox: import("../../customize").Customizable<import("react").ComponentType<InputSubmitButtonBoxProps>>;

package/dist/esm/types/ui/Conversation/InputBox/InputTextBox.d.ts

@@ -3,6 +3,7 @@ export interface TextInputBoxProps {
     value: string;
     onChange: (value: string) => void;
     onSend: (value: string) => void;
+    disabled?: boolean;
     inputRef?: RefObject<HTMLTextAreaElement>;
 }
 export declare const InputTextBox: import("../../customize").Customizable<import("react").ComponentType<TextInputBoxProps>>;

package/dist/index.d.ts

@@ -13313,12 +13313,14 @@ declare const InputBox: Customizable<react.ComponentType<unknown>>;
 
 interface InputBoxFileProps {
     file: File;
+    disabled?: boolean;
     onDelete: (file: File) => void;
 }
 declare const InputBoxFile: Customizable<react.ComponentType<InputBoxFileProps>>;
 
 interface InputBoxFileListProps {
     files: File[];
+    disabled?: boolean;
     onDelete: (file: File) => void;
 }
 declare const InputBoxFileList: Customizable<react.ComponentType<InputBoxFileListProps>>;
@@ -13327,6 +13329,7 @@ interface InputFilesBoxProps {
     value: File[];
     accept?: string;
     loading?: boolean;
+    disabled?: boolean;
     onAddedClick?: () => void;
     onUpload: (value: globalThis.File[]) => void;
 }
@@ -13336,6 +13339,7 @@ declare const InputFilesBox: Customizable<react.ComponentType<InputFilesBoxProps
 interface InputSubmitButtonBoxProps {
     onSubmit: () => void;
     disabled?: boolean;
+    loading?: boolean;
 }
 declare const InputSubmitButtonBox: Customizable<react.ComponentType<InputSubmitButtonBoxProps>>;
 
@@ -13343,6 +13347,7 @@ interface TextInputBoxProps {
     value: string;
     onChange: (value: string) => void;
     onSend: (value: string) => void;
+    disabled?: boolean;
     inputRef?: RefObject<HTMLTextAreaElement>;
 }
 declare const InputTextBox: Customizable<react.ComponentType<TextInputBoxProps>>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@webinex/chatify",
   "description": "Webinex Chatify",
   "private": false,
-  "version": "2.0.1-alpha2",
+  "version": "2.0.2-alpha2",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "main": "src/index.ts",

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

@@ -11,6 +11,7 @@ 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(() => {
@@ -18,16 +19,17 @@ function useFormState() {
       return;
     }
 
-    setText('');
-    setFiles([]);
-    Promise.resolve(onSend({ text, files })).catch(() => {
-      setText(text);
-      setFiles(files);
-    });
+    setSending(true);
+    Promise.resolve(onSend({ text, 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 }] as const;
+  return [onSubmit, { text, setText, files, onUpload, loading, showFileBox, onDeleteFile, sending }] as const;
 }
 
 function useFlippoInputFileBox() {
@@ -64,26 +66,26 @@ function useFlippoInputFileBox() {
 }
 
 export const InputBox = customize('InputBox', () => {
-  const [onSend, { text, setText, files, loading, onUpload, showFileBox, onDeleteFile }] = useFormState();
+  const [onSend, { text, setText, files, loading, onUpload, showFileBox, onDeleteFile, sending }] =
+    useFormState();
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [showFilesModal, setShowFilesModal] = useState(false);
   const [showFileList, setShowFileList] = useState(false);
   const toggleShowFileList = useCallback(() => setShowFileList((prev) => !prev), []);
 
   useLayoutEffect(() => inputRef.current?.focus(), []);
 
   useEffect(() => {
-    if (files.length === 0 && showFilesModal) {
-      setShowFilesModal(false);
+    if (files.length === 0 && showFileList) {
+      setShowFileList(false);
     }
-  }, [files, showFilesModal]);
+  }, [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} />
+            <InputBoxFileList files={files} onDelete={onDeleteFile} disabled={sending} />
           </div>
         )}
         <div className="wxchtf-input-box-row">
@@ -93,10 +95,17 @@ export const InputBox = customize('InputBox', () => {
               onUpload={onUpload}
               value={files}
               loading={loading}
+              disabled={sending}
             />
           )}
-          <InputTextBox value={text} onSend={onSend} onChange={setText} inputRef={inputRef} />
-          <InputSubmitButtonBox onSubmit={onSend} disabled={loading} />
+          <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

@@ -7,11 +7,12 @@ import { customize } from '../../customize';
 
 export interface InputBoxFileProps {
   file: File;
+  disabled?: boolean;
   onDelete: (file: File) => void;
 }
 
 export const InputBoxFile = customize('InputBoxFile', (props: InputBoxFileProps) => {
-  const { file, onDelete } = props;
+  const { file, disabled, onDelete } = props;
   const formatter = useFormatter();
   const onDeleteClick = useCallback(() => onDelete(file), [file, onDelete]);
 
@@ -25,6 +26,7 @@ export const InputBoxFile = customize('InputBoxFile', (props: InputBoxFileProps)
       </div>
       <div className="wxchtf-file-actions">
         <Button
+          disabled={disabled}
           className="wxchtf-delete"
           type="link"
           icon={<Icon type="delete-file" />}

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

@@ -4,15 +4,17 @@ 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 } = props;
+  const { files, onDelete, disabled } = props;
+
   return (
     <div className="wxchtf-file-list">
       {files.map((file) => (
-        <InputBoxFile key={file.ref} file={file} onDelete={onDelete} />
+        <InputBoxFile key={file.ref} file={file} onDelete={onDelete} disabled={disabled} />
       ))}
     </div>
   );

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

@@ -8,12 +8,13 @@ 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 } = props;
+  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);
@@ -40,6 +41,7 @@ export const InputFileButton = customize('InputFileButton', (props: InputFilesBo
         loading={loading}
         onClick={onClick}
         type="link"
+        disabled={disabled}
         icon={<Icon type="attach" />}
         className="wxchtf-add-files-btn"
       />
@@ -50,6 +52,7 @@ export const InputFileButton = customize('InputFileButton', (props: InputFilesBo
           onAnimationIteration={onCountButtonAnimationEnd}
           onClick={onAddedClick}
           type="link"
+          disabled={disabled}
           icon={<>+{value.length}</>}
         />
       )}

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

@@ -5,10 +5,11 @@ import { Icon } from '../../common/Icon';
 export interface InputSubmitButtonBoxProps {
   onSubmit: () => void;
   disabled?: boolean;
+  loading?: boolean;
 }
 
 export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
-  const { onSubmit, disabled } = props;
+  const { onSubmit, disabled, loading } = props;
 
   return (
     <div className="wxchtf-submit-btn-box">
@@ -18,6 +19,7 @@ export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: In
         icon={<Icon type="send" />}
         className="wxchtf-submit-btn"
         disabled={disabled}
+        loading={loading}
       />
     </div>
   );

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

@@ -9,6 +9,7 @@ export interface TextInputBoxProps {
   value: string;
   onChange: (value: string) => void;
   onSend: (value: string) => void;
+  disabled?: boolean;
   inputRef?: RefObject<HTMLTextAreaElement>;
 }
 
@@ -19,7 +20,7 @@ const AUTO_SIZE: TextAreaProps['autoSize'] = { maxRows: 5, minRows: 1 };
 export const InputTextBox = customize(
   'InputTextBox',
   memo((props: TextInputBoxProps) => {
-    const { value, onChange, onSend, inputRef } = props;
+    const { value, onChange, onSend, disabled, inputRef } = props;
     const localizer = useLocalizer();
 
     const onInputChange = useCallback(
@@ -46,6 +47,7 @@ export const InputTextBox = customize(
           className="wxchtf-text-input-textarea"
           placeholder={localizer.input.placeholder()}
           onKeyDown={onKeyDown}
+          disabled={disabled}
         />
       </div>
     );

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

@@ -4,7 +4,7 @@ import { customize, useCustomizeContext } from '../../customize';
 import { useFormatter } from '../../useFormatter';
 import { Icon } from '../../common';
 import { ConversationCustomizeValue } from '../Conversation';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 function open(url: string) {
   const w = window.open(url, '_blank');
@@ -15,17 +15,33 @@ export interface MessageFileProps {
   file: File;
 }
 
-export const MessageFile = customize('MessageFile', (props: MessageFileProps) => {
+function useOpen(props: MessageFileProps) {
   const { file } = props;
   const { flippo } = useCustomizeContext<ConversationCustomizeValue>();
-  const formatter = useFormatter();
+  const [isOpenFetching, setIsOpenFetching] = useState(false);
 
-  const onOpen = useCallback(() => flippo?.getSasUrl(file.ref).then(open), [flippo, file.ref]);
+  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 onClick={onOpen} type="link" icon={<Icon type="open-file" />} />
+        <Button loading={isOpenFetching} onClick={onOpen} type="link" icon={<Icon type="open-file" />} />
       </div>
       <div className="wxchtf-file-info">
         <div className="wxchtf-name">{file.name}</div>