From 92e81345e80afd4e7f29dfbe9997de715eba4244 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 5 Jul 2024 03:26:52 -0300 Subject: [PATCH 1/3] fix: pasting files not working --- .../components/chatView/chatInput/index.tsx | 58 ++++++++++++------- 1 file changed, 37 insertions(+), 21 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx index 4ffe967a9d27..e95651edfa4f 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx @@ -1,6 +1,6 @@ import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file"; import useAlertStore from "@/stores/alertStore"; -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import ShortUniqueId from "short-unique-id"; import { ALLOWED_IMAGE_INPUT_EXTENSIONS, @@ -9,7 +9,6 @@ import { FS_ERROR_TEXT, SN_ERROR_TEXT, } from "../../../../../constants/constants"; -import { uploadFile } from "../../../../../controllers/API"; import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; import { ChatInputType, @@ -22,7 +21,7 @@ import UploadFileButton from "./components/uploadFileButton"; import { getClassNamesFilePreview } from "./helpers/get-class-file-preview"; import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area"; import useFocusOnUnlock from "./hooks/use-focus-unlock"; -export default function ChatInput({ +export default function ChattInput({ lockChat, chatValue, sendMessage, @@ -39,23 +38,35 @@ export default function ChatInput({ const [inputFocus, setInputFocus] = useState(false); const fileInputRef = useRef(null); const setErrorData = useAlertStore((state) => state.setErrorData); - const [id, setId] = useState(""); useFocusOnUnlock(lockChat, inputRef); useAutoResizeTextArea(chatValue, inputRef); - const handleFileChange = async ( - event: React.ChangeEvent, - ) => { - const fileInput = event.target; - const file = fileInput.files?.[0]; + const { mutate, isPending } = usePostUploadFile(); + + const handleFileChange = async (event: React.ChangeEvent | ClipboardEvent) => { + let file: File | null = null; + + if ('clipboardData' in event) { + const items = event.clipboardData?.items; + if (items) { + for (let i = 0; i < items.length; i++) { + const blob = items[i].getAsFile(); + if (blob) { + file = blob; + break; + } + } + } + } else { + const fileInput = event.target as HTMLInputElement; + file = fileInput.files?.[0] ?? null; + } + if (file) { const fileExtension = file.name.split(".").pop()?.toLowerCase(); - if ( - !fileExtension || - !ALLOWED_IMAGE_INPUT_EXTENSIONS.includes(fileExtension) - ) { + if (!fileExtension || !ALLOWED_IMAGE_INPUT_EXTENSIONS.includes(fileExtension)) { setErrorData({ title: "Error uploading file", list: [FS_ERROR_TEXT, SN_ERROR_TEXT], @@ -65,18 +76,16 @@ export default function ChatInput({ const uid = new ShortUniqueId(); const id = uid.randomUUID(10); - setId(id); const type = file.type.split("/")[0]; - const blob = file; setFiles((prevFiles) => [ ...prevFiles, - { file: blob, loading: true, error: false, id, type }, + { file, loading: true, error: false, id, type }, ]); - mutation.mutate( - { file: blob, id: currentFlowId }, + mutate( + { file, id: currentFlowId }, { onSuccess: (data) => { setFiles((prev) => { @@ -96,14 +105,21 @@ export default function ChatInput({ return newFiles; }); }, - }, + } ); } - fileInput.value = ""; + if ('target' in event && event.target instanceof HTMLInputElement) { + event.target.value = ""; + } }; - const mutation = usePostUploadFile(); + useEffect(() => { + document.addEventListener("paste", handleFileChange); + return () => { + document.removeEventListener("paste", handleFileChange); + }; + }, [handleFileChange, currentFlowId, lockChat]); const send = () => { sendMessage({ From f3a71fe82f165dd2eb0fdbd02f7b4c77dfed4d83 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 5 Jul 2024 06:30:39 +0000 Subject: [PATCH 2/3] [autofix.ci] apply automated fixes --- .../components/chatView/chatInput/index.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx index e95651edfa4f..c9db7b6daae0 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx @@ -44,10 +44,12 @@ export default function ChattInput({ const { mutate, isPending } = usePostUploadFile(); - const handleFileChange = async (event: React.ChangeEvent | ClipboardEvent) => { + const handleFileChange = async ( + event: React.ChangeEvent | ClipboardEvent, + ) => { let file: File | null = null; - if ('clipboardData' in event) { + if ("clipboardData" in event) { const items = event.clipboardData?.items; if (items) { for (let i = 0; i < items.length; i++) { @@ -66,7 +68,10 @@ export default function ChattInput({ if (file) { const fileExtension = file.name.split(".").pop()?.toLowerCase(); - if (!fileExtension || !ALLOWED_IMAGE_INPUT_EXTENSIONS.includes(fileExtension)) { + if ( + !fileExtension || + !ALLOWED_IMAGE_INPUT_EXTENSIONS.includes(fileExtension) + ) { setErrorData({ title: "Error uploading file", list: [FS_ERROR_TEXT, SN_ERROR_TEXT], @@ -105,11 +110,11 @@ export default function ChattInput({ return newFiles; }); }, - } + }, ); } - if ('target' in event && event.target instanceof HTMLInputElement) { + if ("target" in event && event.target instanceof HTMLInputElement) { event.target.value = ""; } }; From fd1fdf1e1ee36142955387d2eb4aad3e698f7547 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 5 Jul 2024 09:42:24 -0300 Subject: [PATCH 3/3] refactor: change new import --- src/frontend/src/components/inputFileComponent/index.tsx | 4 ++-- .../components/IOFieldView/components/FileInput/index.tsx | 4 ++-- .../src/modals/IOModal/components/chatView/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 63f0ae1d006b..6a8ba0eb752f 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -47,7 +47,7 @@ export default function InputFileComponent({ setMyValue(value); }, [value]); - const mutation = usePostUploadFile(); + const { mutate } = usePostUploadFile(); const handleButtonClick = (): void => { // Create a file input element @@ -66,7 +66,7 @@ export default function InputFileComponent({ // Check if the file type is correct if (file && checkFileType(file.name)) { // Upload the file - mutation.mutate( + mutate( { file, id: currentFlowId }, { onSuccess: (data) => { diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx index 58ac9f05e8c9..d8a06c913837 100644 --- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx @@ -67,7 +67,7 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) { setIsDragging(false); }; - const mutation = usePostUploadFile(); + const { mutate } = usePostUploadFile(); const upload = async (file) => { if (file) { @@ -83,7 +83,7 @@ export default function IOFileInput({ field, updateValue }: IOFileInputProps) { document.body.appendChild(imgElement); // Add the image to the body or replace this with your desired location }; fileReader.readAsDataURL(file); - mutation.mutate( + mutate( { file, id: currentFlowId }, { onSuccess: (data) => { diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx index 018b3459d642..422f0f8e1de1 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx @@ -165,6 +165,8 @@ export default function ChatView({ setIsDragging(false); }; + const { mutate } = usePostUploadFile(); + const handleFiles = (files, setFiles, currentFlowId, setErrorData) => { if (files) { const file = files?.[0]; @@ -192,7 +194,7 @@ export default function ChatView({ { file: blob, loading: true, error: false, id, type }, ]); - mutation.mutate( + mutate( { file: blob, id: currentFlowId }, { onSuccess: (data) => { @@ -218,8 +220,6 @@ export default function ChatView({ } }; - const mutation = usePostUploadFile(); - return (