made some changes

Author: tasbi03

src/App.tsx

@@ -1,12 +1,14 @@
-import React from "react";
 import ChatBot, { Flow } from "react-chatbotify";
+
 import RcbPlugin from "./factory/RcbPluginFactory";
 import { InputValidatorBlock } from "./types/InputValidatorBlock";
 import { validateFile } from "./utils/validateFile";
 
 const App = () => {
+  // initialize example plugin
   const plugins = [RcbPlugin()];
 
+  // example flow for testing
   const flow: Flow = {
     start: {
       message: "Hey there! Please enter your age.",
@@ -31,9 +33,9 @@ const App = () => {
       validateInput: (userInput?: string) => {
         console.log("validateInput called with userInput:", userInput);
 
-        // Allow empty input or file names with allowed extensions
+        
         if (
-          !userInput ||
+          userInput &&
           /\.(jpg|jpeg|png)$/i.test(userInput.trim())
         ) {
           return { success: true };
@@ -42,44 +44,46 @@ const App = () => {
         // Disallow other text inputs
         return {
           success: false,
-          promptContent: "Please upload a file.",
+          promptContent: "Please upload a valid file (JPEG or PNG). Empty inputs are not allowed.",
           promptDuration: 3000,
           promptType: "error",
         };
       },
-      validateFile: (file?: File) => {
+      validateFileInput: (file?: File) => {
         return validateFile(file); // Validate file input
       },
       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;
+            // 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:
-        "Thank you! Your profile picture has been uploaded successfully.",
-      path: "end",
+        "Thank you! Your picture has been uploaded successfully. You passed the file upload validation!",
+      path: "start",
     },
+  }
 
-    end: {
-      message: "This is the end of the flow. Thank you!",
-    },
-  };
-
- 
-
-  return <ChatBot id="chatbot-id" plugins={plugins} flow={flow} />;
-};
+  return (
+		<ChatBot
+			id="chatbot-id"
+			plugins={plugins}
+			flow={flow}
+		></ChatBot>
+	);
+}
 
 export default App;

src/types/InputValidatorBlock.ts

@@ -3,6 +3,10 @@
 import { Block } from "react-chatbotify";
 import { ValidationResult } from "./ValidationResult";
 
+/**
+ * Extends the Block from React ChatBotify to support inputValidator attribute.
+ */
+
 export type InputValidatorBlock = Omit<Block, "file"> & {
   file?: (params: { files?: FileList }) => void | Promise<void>; // Updated
   validateInput?: (userInput?: string) => ValidationResult;

src/utils/validateFile.ts

@@ -5,46 +5,57 @@ import { ValidationResult } from "../types/ValidationResult";
  * Ensures the file is of allowed type and size, and rejects non-file inputs.
  */
 export const validateFile = (file?: File): 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 input is not a File object (e.g., text input or invalid type)
-  if (!(file instanceof File)) {
-    return {
-      success: false,
-      promptContent: "Invalid input. 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",
-    };
-  }
-
-  // Validate file size
-  if (file.size > maxSizeInBytes) {
-    return {
-      success: false,
-      promptContent: "File size must be less than 5MB.",
-      promptType: "error",
-    };
-  }
-
-  return { success: true };
-};
+    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 input is not a File object (e.g., text input or invalid type)
+    if (!(file instanceof File)) {
+      return {
+        success: false,
+        promptContent: "Invalid input. Please upload a valid file.",
+        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",
+      };
+    }
+  
+    // Validate file size
+    if (file.size > maxSizeInBytes) {
+      return {
+        success: false,
+        promptContent: "File size must be less than 5MB.",
+        promptType: "error",
+      };
+    }
+  
+    return { success: true };
+  };
+