From 7f616aec8b34ac309037c42d27da08f6aff36910 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 7 Jun 2024 17:31:22 -0300 Subject: [PATCH 1/6] Fix: Download Button trigger chat --- .../components/downloadButton/downloadButton.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx index 8df64561b..4c1559e63 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx @@ -1,4 +1,5 @@ import ForwardedIconComponent from "../../../../../../../components/genericIconComponent"; +import { Button } from "../../../../../../../components/ui/button"; export default function DownloadButton({ isHovered, @@ -10,14 +11,18 @@ export default function DownloadButton({ if (isHovered) { return (
- +
); } From 0d3780826df0bc5d623b81dd25a542cddf09a7ea Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 7 Jun 2024 17:50:15 -0300 Subject: [PATCH 2/6] Fix: block file clip input when chat input are blocked --- .../chatInput/components/uploadFileButton/index.tsx | 5 ++++- .../modals/IOModal/components/chatView/chatInput/index.tsx | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx index be2b9c7fc..e675794e0 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx @@ -5,17 +5,20 @@ const UploadFileButton = ({ fileInputRef, handleFileChange, handleButtonClick, + lockChat, }) => { return (
-
+
{ setFiles((prev: FilePreviewType[]) => - prev.filter((f) => f.id !== file.id) + prev.filter((f) => f.id !== file.id), ); // TODO: delete file on backend }} From bf61c339e1cc5683d4d88642a61b399ce2cabfbd Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 7 Jun 2024 18:28:58 -0300 Subject: [PATCH 3/6] Fix: disable file paste when chat are locked --- .../components/chatView/chatInput/hooks/use-upload.tsx | 7 +++++-- .../modals/IOModal/components/chatView/chatInput/index.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx index 487bd7db8..88e9b3509 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx @@ -2,9 +2,12 @@ import { useEffect } from "react"; import ShortUniqueId from "short-unique-id"; import useFileUpload from "./use-file-upload"; -const useUpload = (uploadFile, currentFlowId, setFiles) => { +const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => { useEffect(() => { const handlePaste = (event: ClipboardEvent): void => { + if (lockChat) { + return; + } const items = event.clipboardData?.items; if (items) { for (let i = 0; i < items.length; i++) { @@ -27,7 +30,7 @@ const useUpload = (uploadFile, currentFlowId, setFiles) => { return () => { document.removeEventListener("paste", handlePaste); }; - }, [uploadFile, currentFlowId]); + }, [uploadFile, currentFlowId, lockChat]); return null; }; 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 12209c925..22d8d4ea3 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx @@ -37,7 +37,7 @@ export default function ChatInput({ useFocusOnUnlock(lockChat, inputRef); useAutoResizeTextArea(chatValue, inputRef); - useUpload(uploadFile, currentFlowId, setFiles); + useUpload(uploadFile, currentFlowId, setFiles, lockChat || saveLoading); const { handleFileChange } = useHandleFileChange(setFiles, currentFlowId); const send = () => { From 44fbc4ebdcb6254ab87ddd6488019fd6221375ef Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 7 Jun 2024 18:47:19 -0300 Subject: [PATCH 4/6] Fix: Image files displaying as normal files --- .../IOModal/components/chatView/fileComponent/index.tsx | 4 ++-- .../IOModal/components/chatView/filePreviewChat/index.tsx | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx index 6d013d52e..b62e0f763 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx @@ -8,7 +8,7 @@ import DownloadButton from "./components/downloadButton/downloadButton"; import getClasses from "./utils/get-classes"; import handleDownload from "./utils/handle-download"; -const imgTypes = new Set(["png", "jpg"]); +const imgTypes = new Set(["png", "jpg", "jpeg", "gif", "webp", "image"]); export default function FileCard({ fileName, @@ -29,7 +29,7 @@ export default function FileCard({ const imgSrc = `${BACKEND_URL.slice( 0, - BACKEND_URL.length - 1 + BACKEND_URL.length - 1, )}${BASE_URL_API}files/images/${content}`; if (showFile) { diff --git a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx index 10b873a5c..f1ff169b0 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx @@ -5,6 +5,8 @@ import IconComponent, { import { Skeleton } from "../../../../../components/ui/skeleton"; import formatFileName from "./utils/format-file-name"; +const supImgFiles = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "image"]; + export default function FilePreview({ error, file, @@ -16,7 +18,8 @@ export default function FilePreview({ error: boolean; onDelete: () => void; }) { - const isImage = file.type.toLowerCase().includes("image"); + const fileType = file.type.toLowerCase(); + const isImage = supImgFiles.some((type) => fileType.includes(type)); const [isHovered, setIsHovered] = useState(false); From 5e28f2d00529d4d21e4c5f8b94d961145509b645 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 7 Jun 2024 19:15:39 -0300 Subject: [PATCH 5/6] Refactor: Block user from sending files that are not images extensions --- .../hooks/use-handle-file-change.tsx | 17 ++++++++++++++ .../chatView/chatInput/hooks/use-upload.tsx | 23 +++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx index 748ca7fe5..6e16587f2 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx @@ -1,13 +1,30 @@ import ShortUniqueId from "short-unique-id"; import useFileUpload from "./use-file-upload"; +import useAlertStore from "../../../../../../stores/alertStore"; + +const fsErrorText = + "Please ensure your file has one of the following extensions:"; +const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp"; export const useHandleFileChange = (setFiles, currentFlowId) => { + const setErrorData = useAlertStore((state) => state.setErrorData); const handleFileChange = async ( event: React.ChangeEvent, ) => { const fileInput = event.target; const file = fileInput.files?.[0]; if (file) { + const allowedExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp"]; + const fileExtension = file.name.split(".").pop()?.toLowerCase(); + + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + setErrorData({ + title: "Error uploading file", + list: [fsErrorText, snErrorTxt], + }); + return; + } + const uid = new ShortUniqueId({ length: 10 }); // Increase the length to ensure uniqueness const id = uid(); const type = file.type.split("/")[0]; diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx index 88e9b3509..f41cada11 100644 --- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx +++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx @@ -1,8 +1,14 @@ import { useEffect } from "react"; import ShortUniqueId from "short-unique-id"; import useFileUpload from "./use-file-upload"; +import useAlertStore from "../../../../../../stores/alertStore"; + +const fsErrorText = + "Please ensure your file has one of the following extensions:"; +const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp"; const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => { + const setErrorData = useAlertStore((state) => state.setErrorData); useEffect(() => { const handlePaste = (event: ClipboardEvent): void => { if (lockChat) { @@ -15,6 +21,23 @@ const useUpload = (uploadFile, currentFlowId, setFiles, lockChat) => { const uid = new ShortUniqueId({ length: 3 }); const blob = items[i].getAsFile(); if (blob) { + const allowedExtensions = [ + "png", + "jpg", + "jpeg", + "gif", + "bmp", + "webp", + ]; + const fileExtension = blob.name.split(".").pop()?.toLowerCase(); + + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + setErrorData({ + title: "Error uploading file", + list: [fsErrorText, snErrorTxt], + }); + return; + } const id = uid(); setFiles((prevFiles) => [ ...prevFiles, From a6d51567b7a6b9b6c2a0c3911674b5494421b89a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 7 Jun 2024 19:47:56 -0300 Subject: [PATCH 6/6] chore: Update TableAutoCellRender to handle object rendering in ArrayReader component --- src/frontend/src/components/arrayReaderComponent/index.tsx | 4 +++- .../src/components/recordsOutputComponent/index.tsx | 2 ++ .../components/tableAutoCellRender/index.tsx | 7 ++----- src/frontend/src/utils/utils.ts | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/components/arrayReaderComponent/index.tsx b/src/frontend/src/components/arrayReaderComponent/index.tsx index bcbfde010..6e151d426 100644 --- a/src/frontend/src/components/arrayReaderComponent/index.tsx +++ b/src/frontend/src/components/arrayReaderComponent/index.tsx @@ -1,10 +1,12 @@ +import TableAutoCellRender from "../tableComponent/components/tableAutoCellRender"; + export default function ArrayReader({ array }: { array: any[] }): JSX.Element { //TODO check array type return (
    {array.map((item, index) => ( -
  • {item}
    • +
  • {}
    • ))}
diff --git a/src/frontend/src/components/recordsOutputComponent/index.tsx b/src/frontend/src/components/recordsOutputComponent/index.tsx index 36c3a7370..957a43cc7 100644 --- a/src/frontend/src/components/recordsOutputComponent/index.tsx +++ b/src/frontend/src/components/recordsOutputComponent/index.tsx @@ -13,7 +13,9 @@ function RecordsOutputComponent({ rows: any; columnMode?: "intersection" | "union"; }) { + console.log("rows", rows); const columns = extractColumnsFromRows(rows, columnMode); + console.log("columns", columns); const columnDefs = columns.map((col, idx) => ({ ...col, diff --git a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx index 0c5c00ac9..4a6020f78 100644 --- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx @@ -9,20 +9,17 @@ import { Badge } from "../../../ui/badge"; export default function TableAutoCellRender({ value, -}: CustomCellRendererProps) { +}: CustomCellRendererProps | { value: any }) { function getCellType() { switch (typeof value) { case "object": if (value === null) { return String(value); } else if (Array.isArray(value)) { - return ; - } else if (value.definitions) { - // use a custom render defined by the sender + return ; } else { return ; } - break; case "string": if (isTimeStampString(value)) { return ; diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index aecf874b7..f067f3617 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -1,7 +1,6 @@ import { ColDef, ColGroupDef } from "ag-grid-community"; import clsx, { ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; -import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender"; import { APIDataType, TemplateVariableType } from "../types/api"; import { groupedObjType, @@ -10,6 +9,7 @@ import { } from "../types/components"; import { NodeType } from "../types/flow"; import { FlowState } from "../types/tabs"; +import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender"; export function classNames(...classes: Array): string { return classes.filter(Boolean).join(" ");