Requested changes done and cleaned up the code

Author: tasbi03

src/App.tsx

@@ -31,43 +31,21 @@ const App = () => {
       message:
         "Great! Now please upload a profile picture (JPEG or PNG) or provide a URL.",
       path: "file_upload_validation",
-      chatDisabled: true, // Set to true if you want to disable text input
-      validateTextInput: (userInput?: string) => {
-        console.log("validateTextInput called with userInput:", userInput);
-
-        if (userInput && userInput.trim().length > 0) {
-          // Optionally, validate if the input is a valid URL
-          // For simplicity, we'll accept any non-empty text
-          return { success: true };
-        }
-
-        return {
-          success: false,
-          promptContent:
-            "Please provide a valid URL or upload a file.",
-          promptDuration: 3000,
-          promptType: "error",
-        };
-      },
+      chatDisabled: true, // Text input is disabled
       validateFileInput: (file?: File) => {
-        return validateFile(file); // Validate file input
+        return validateFile(file); // Validation is handled here
       },
       file: async ({ files }) => {
         console.log("Files received:", files);
-
+    
         if (files && files[0]) {
-          const validationResult = validateFile(files[0]);
-          if (!validationResult.success) {
-            console.error(validationResult.promptContent);
-            // Return early to prevent success
-            return { success: false };
-          }
           console.log("File uploaded successfully:", files[0]);
         } else {
           console.error("No file provided.");
         }
       },
     } as InputValidatorBlock,
+    
 
     file_upload_validation: {
       message:

src/core/useRcbPlugin.ts

@@ -18,7 +18,7 @@ import { getValidator } from "../utils/getValidator";
 /**
  * Plugin hook that handles all the core logic.
  *
- * @param pluginConfig Configurations for the plugin.
+ * @param pluginConfig configurations for the plugin
  */
 const useRcbPlugin = (pluginConfig?: PluginConfig) => {
     const { showToast } = useToasts();
@@ -45,7 +45,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
                 getBotId(),
                 getFlow(),
                 "validateTextInput"
-              );
+            );
             if (!validator) {
                 return;
             }
@@ -85,51 +85,49 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
             setNumPluginToasts((prev) => prev + 1);
         };
 
-        /**
-         * Handles the user uploading a file event.
-         *
-         * @param event Event emitted when user uploads a file.
-         */
-        // useRcbPlugin.ts
-
         const handleUserUploadFile = (event: Event): void => {
             const rcbEvent = event as RcbUserUploadFileEvent;
             const file: File | undefined = rcbEvent.data?.files?.[0];
-        
+
             if (!file) {
-            console.error("No file uploaded.");
-            event.preventDefault();
-            return;
+                console.error("No file uploaded.");
+                event.preventDefault();
+                return;
             }
-        
+
             const validator = getValidator<File>(
-            rcbEvent,
-            getBotId(),
-            getFlow(),
-            "validateFileInput"
+                rcbEvent,
+                getBotId(),
+                getFlow(),
+                "validateFileInput"
             );
-        
+
             if (!validator) {
-            console.error("Validator not found for file input.");
-            return;
+                console.error("Validator not found for file input.");
+                return;
             }
-        
+
             const validationResult = validator(file);
-        
+
             if (!validationResult.success) {
-            console.error("Validation failed:", validationResult);
-            if (validationResult.promptContent) {
-                showToast(validationResult.promptContent, validationResult.promptDuration ?? 3000);
-            }
-            event.preventDefault();
-            return;
+                console.error("Validation failed:", validationResult);
+                if (validationResult.promptContent) {
+                    showToast(
+                        validationResult.promptContent,
+                        validationResult.promptDuration ?? 3000
+                    );
+                }
+                event.preventDefault();
+                return;
             }
-        
+
             console.log("Validation successful:", validationResult);
         };
 
         /**
          * Handles the dismiss toast event.
+         *
+         * @param event Event emitted when toast is dismissed.
          */
         const handleDismissToast = (): void => {
             setNumPluginToasts((prev) => prev - 1);

src/types/InputValidatorBlock.ts

@@ -1,14 +1,10 @@
-// src/types/InputValidatorBlock.ts
-
 import { Block } from "react-chatbotify";
 import { ValidationResult } from "./ValidationResult";
 
 /**
- * Extends the Block from React ChatBotify to support inputValidator attribute.
+ * Extends the Block from React ChatBotify to support inputValidator attributes.
  */
-
-export type InputValidatorBlock = Omit<Block, "file"> & {
-  file?: (params: { files?: FileList }) => void | Promise<void>;
+export type InputValidatorBlock = Block & {
   validateTextInput?: (userInput?: string) => ValidationResult;
-  validateFileInput?: (file?: File) => ValidationResult;
-};
+  validateFileInput?: (files?: FileList) => ValidationResult; // Accepts multiple files
+};

src/utils/getValidator.ts

@@ -1,5 +1,3 @@
-// src/utils/getValidator.ts
-
 import { Flow, RcbUserSubmitTextEvent, RcbUserUploadFileEvent } from "react-chatbotify";
 import { InputValidatorBlock } from "../types/InputValidatorBlock";
 import { ValidationResult } from "../types/ValidationResult";
@@ -23,25 +21,15 @@ export const getValidator = <T = string | File>(
   currFlow: Flow,
   validatorType: "validateTextInput" | "validateFileInput" = "validateTextInput"
 ): ((input: T) => ValidationResult) | undefined => {
-    if (!event.detail) {
-      return;
-    }
-  
-    const { botId, currPath } = event.detail;
-  
-    if (currBotId !== botId) {
-      return;
-    }
-  
-    if (!currPath) {
-      return;
+    if (!event.detail?.currPath || currBotId !== event.detail.botId) {
+        return;
     }
-  
-    const currBlock = currFlow[currPath] as InputValidatorBlock;
+
+    const currBlock = currFlow[event.detail.currPath] as InputValidatorBlock;
     if (!currBlock) {
-      return;
+        return;
     }
-  
+
     const validator = currBlock[validatorType] as ((input: T) => ValidationResult) | undefined;
     return typeof validator === "function" ? validator : undefined;
-  };
+};

src/utils/validateFile.ts

@@ -1,51 +1,54 @@
 import { ValidationResult } from "../types/ValidationResult";
 
 /**
- * Validates the uploaded file.
- * Ensures the file is of allowed type and size, and rejects non-file inputs.
+ * Validates uploaded files.
+ * Ensures each file is of an allowed type and size, and rejects invalid inputs.
  */
-export const validateFile = (file?: File): ValidationResult => {
+export const validateFile = (input?: File | FileList): ValidationResult => {
     const allowedTypes = ["image/jpeg", "image/png"];
     const maxSizeInBytes = 5 * 1024 * 1024; // 5MB
-  
-    // Check if no file is provided
-    if (!file) {
-      return {
-        success: false,
-        promptContent: "No file uploaded.",
-        promptDuration: 3000,
-        promptType: "error",
-      };
-    }
-  
-    // Check if the file is empty
-    if (file.size === 0) {
-      return {
-        success: false,
-        promptContent: "The uploaded file is empty. Please upload a valid file.",
-        promptDuration: 3000,
-        promptType: "error",
-      };
-    }
-  
-    // Validate file type
-    if (!allowedTypes.includes(file.type)) {
-      return {
-        success: false,
-        promptContent: "Only JPEG or PNG files are allowed.",
-        promptType: "error",
-      };
+    const files: File[] = input instanceof FileList ? Array.from(input) : input ? [input] : [];
+
+    // Check if no files are provided
+    if (files.length === 0) {
+        return {
+            success: false,
+            promptContent: "No files uploaded.",
+            promptDuration: 3000,
+            promptType: "error",
+        };
     }
-  
-    // Validate file size
-    if (file.size > maxSizeInBytes) {
-      return {
-        success: false,
-        promptContent: "File size must be less than 5MB.",
-        promptType: "error",
-      };
+
+    // Validate each file
+    for (const file of files) {
+        // Check if the file is empty
+        if (file.size === 0) {
+            return {
+                success: false,
+                promptContent: `The file "${file.name}" is empty. Please upload a valid file.`,
+                promptDuration: 3000,
+                promptType: "error",
+            };
+        }
+
+        // Validate file type
+        if (!allowedTypes.includes(file.type)) {
+            return {
+                success: false,
+                promptContent: `The file "${file.name}" is not a valid type. Only JPEG or PNG files are allowed.`,
+                promptType: "error",
+            };
+        }
+
+        // Validate file size
+        if (file.size > maxSizeInBytes) {
+            return {
+                success: false,
+                promptContent: `The file "${file.name}" exceeds the 5MB size limit.`,
+                promptType: "error",
+            };
+        }
     }
-  
+
     return { success: true };
-  };
-  
+};