Merge branch 'cz/mergeAll' of https://github.com/langflow-ai/langflow into cz/mergeAll

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 (
     <div>
       <ul>
         {array.map((item, index) => (
-          <li key={index}>{item}</li>
+          <li key={index}>{<TableAutoCellRender value={item} />}</li>
         ))}
       </ul>
     </div>

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,

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 <ArrayReader array={value} />;
+          return <ObjectRender object={value} />;
-        } else if (value.definitions) {
-          // use a custom render defined by the sender
         } else {
           return <ObjectRender object={value} />;
         }
-        break;
       case "string":
         if (isTimeStampString(value)) {
           return <DateReader date={value} />;

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx

@@ -5,17 +5,20 @@ const UploadFileButton = ({
   fileInputRef,
   handleFileChange,
   handleButtonClick,
+  lockChat,
 }) => {
   return (
     <div>
       <input
+        disabled={lockChat}
         type="file"
         ref={fileInputRef}
         style={{ display: "none" }}
         onChange={handleFileChange}
       />
       <Button
-        className="font-bold text-white transition-all hover:text-muted-foreground"
+        disabled={lockChat}
+        className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`}
         onClick={handleButtonClick}
         variant="none"
         size="none"

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<HTMLInputElement>,
   ) => {
     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];

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx

@@ -1,10 +1,19 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
 
-const useUpload = (uploadFile, currentFlowId, setFiles) => {
+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) {
+        return;
+      }
       const items = event.clipboardData?.items;
       if (items) {
         for (let i = 0; i < items.length; i++) {
@@ -12,6 +21,23 @@ const useUpload = (uploadFile, currentFlowId, setFiles) => {
           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,
@@ -27,7 +53,7 @@ const useUpload = (uploadFile, currentFlowId, setFiles) => {
     return () => {
       document.removeEventListener("paste", handlePaste);
     };
-  }, [uploadFile, currentFlowId]);
+  }, [uploadFile, currentFlowId, lockChat]);
 
   return null;
 };

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 = () => {
@@ -92,8 +92,11 @@ export default function ChatInput({
           />
         </div>
 
-        <div className="absolute bottom-2 left-4">
+        <div
+          className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`}
+        >
           <UploadFileButton
+            lockChat={lockChat || saveLoading}
             fileInputRef={fileInputRef}
             handleFileChange={handleFileChange}
             handleButtonClick={handleButtonClick}
@@ -110,7 +113,7 @@ export default function ChatInput({
               key={file.id}
               onDelete={() => {
                 setFiles((prev: FilePreviewType[]) =>
-                  prev.filter((f) => f.id !== file.id)
+                  prev.filter((f) => f.id !== file.id),
                 );
                 // TODO: delete file on backend
               }}

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 (
       <div
-        className={`absolute right-1 top-1 rounded-bl-lg bg-muted text-sm font-bold text-foreground `}
+        className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground `}
       >
-        <button className="px-2 py-1 text-ring " onClick={handleDownload}>
+        <Button
+          variant={"none"}
+          className="bg-transparent px-2 py-1 text-ring"
+          onClick={handleDownload}
+        >
           <ForwardedIconComponent
             name="DownloadCloud"
-            className="h-5 w-5 text-current hover:scale-110"
+            className="h-5 w-5 bg-transparent text-current hover:scale-110"
           />
-        </button>
+        </Button>
       </div>
     );
   }

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) {

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);
 

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>): string {
   return classes.filter(Boolean).join(" ");