diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index c9bab445e7..3b9fabcee5 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -182,6 +182,7 @@ export default function ChatComponent({ const currentFilesPreview = useSelector(selectFilesPreview()); const chatContentRef = useRef(null); const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []); + const chatInputWrapperRef = useRef(null); const [message, setMessage] = useState( parseStringToTextEditorValue(), @@ -323,7 +324,14 @@ export default function ChatComponent({ ); const uploadFiles = (event: ChangeEvent) => { - const newFilesPreview = Array.from(event.target.files || []).map((file) => { + let clipboardfiles: FileList | undefined; + if ((event as any).clipboardData.files.length) { + clipboardfiles = (event as any).clipboardData.files; + } + + const newFilesPreview = Array.from( + event.target.files || clipboardfiles || [], + ).map((file) => { return { info: file, src: URL.createObjectURL(file), @@ -583,6 +591,20 @@ export default function ChatComponent({ return null; } + useEffect(() => { + const handlePaste = (event) => { + if (event.clipboardData.files.length) { + uploadFiles(event); + } + }; + + chatInputWrapperRef.current?.addEventListener("paste", handlePaste); + + return () => { + chatInputWrapperRef.current?.removeEventListener("paste", handlePaste); + }; + }, []); + return ( <>