feat(bot): ⚡️ Add required option on file upload input

packages/bot-engine/src/components/ChatGroup/ChatBlock/InputChatBlock.tsx

@@ -24,6 +24,7 @@ export const InputChatBlock = ({
   hasAvatar,
   hasGuestAvatar,
   onTransitionEnd,
+  onSkip,
 }: {
   block: InputBlock
   hasGuestAvatar: boolean
@@ -32,6 +33,7 @@ export const InputChatBlock = ({
     answerContent?: InputSubmitContent,
     isRetry?: boolean
   ) => void
+  onSkip: () => void
 }) => {
   const { typebot } = useTypebot()
   const { addAnswer } = useAnswers()
@@ -84,6 +86,7 @@ export const InputChatBlock = ({
       <Input
         block={block}
         onSubmit={handleSubmit}
+        onSkip={onSkip}
         defaultValue={defaultValue?.toString()}
         hasGuestAvatar={hasGuestAvatar}
       />
@@ -94,11 +97,13 @@ export const InputChatBlock = ({
 const Input = ({
   block,
   onSubmit,
+  onSkip,
   defaultValue,
   hasGuestAvatar,
 }: {
   block: InputBlock
   onSubmit: (value: InputSubmitContent) => void
+  onSkip: () => void
   defaultValue?: string
   hasGuestAvatar: boolean
 }) => {
@@ -132,6 +137,8 @@ const Input = ({
     case InputBlockType.RATING:
       return <RatingForm block={block} onSubmit={onSubmit} />
     case InputBlockType.FILE:
-      return <FileUploadForm block={block} onSubmit={onSubmit} />
+      return (
+        <FileUploadForm block={block} onSubmit={onSubmit} onSkip={onSkip} />
+      )
   }
 }

packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx

@@ -9,14 +9,16 @@ import { SendButton, Spinner } from './SendButton'
 type Props = {
   block: FileInputBlock
   onSubmit: (url: InputSubmitContent) => void
+  onSkip: () => void
 }
 
 export const FileUploadForm = ({
   block: {
     id,
-    options: { isMultipleAllowed, labels, sizeLimit },
+    options: { isMultipleAllowed, labels, sizeLimit, isRequired },
   },
   onSubmit,
+  onSkip,
 }: Props) => {
   const {
     isPreview,
@@ -169,6 +171,18 @@ export const FileUploadForm = ({
           </>
         )}
       </label>
+      {selectedFiles.length === 0 && isRequired === false && (
+        <div className="flex justify-end">
+          <button
+            className={
+              'py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
+            }
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+        </div>
+      )}
       {isMultipleAllowed && selectedFiles.length > 0 && !isUploading && (
         <div className="flex justify-end">
           <div className="flex">