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

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx

@@ -17,19 +17,27 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
     onOptionsChange({ ...options, labels: { ...options.labels, button } })
   const handlePlaceholderLabelChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
-  const handleLongChange = (isMultipleAllowed: boolean) =>
+  const handleMultipleFilesChange = (isMultipleAllowed: boolean) =>
     onOptionsChange({ ...options, isMultipleAllowed })
   const handleVariableChange = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
   const handleSizeLimitChange = (sizeLimit?: number) =>
     onOptionsChange({ ...options, sizeLimit })
+  const handleRequiredChange = (isRequired: boolean) =>
+    onOptionsChange({ ...options, isRequired })
   return (
     <Stack spacing={4}>
+      <SwitchWithLabel
+        id="required"
+        label="Required?"
+        initialValue={options.isRequired ?? true}
+        onCheckChange={handleRequiredChange}
+      />
       <SwitchWithLabel
         id="switch"
         label="Allow multiple files?"
         initialValue={options.isMultipleAllowed}
-        onCheckChange={handleLongChange}
+        onCheckChange={handleMultipleFilesChange}
       />
       <Stack>
         <FormLabel mb="0" htmlFor="limit">

apps/builder/playwright/tests/inputs/file.spec.ts

@@ -29,16 +29,19 @@ test('options should work', async ({ page }) => {
   await expect(
     typebotViewer(page).locator(`text=Click to upload`)
   ).toBeVisible()
+  await expect(typebotViewer(page).locator(`text="Skip"`)).toBeHidden()
   await typebotViewer(page)
     .locator(`input[type="file"]`)
     .setInputFiles([path.join(__dirname, '../../fixtures/avatar.jpg')])
   await expect(typebotViewer(page).locator(`text=File uploaded`)).toBeVisible()
   await page.click('text="Collect file"')
+  await page.click('text="Required?"')
   await page.click('text="Allow multiple files?"')
   await page.fill('div[contenteditable=true]', '<strong>Upload now!!</strong>')
   await page.fill('[value="Upload"]', 'Go')
   await page.fill('input[value="10"]', '20')
   await page.click('text="Restart"')
+  await expect(typebotViewer(page).locator(`text="Skip"`)).toBeVisible()
   await expect(typebotViewer(page).locator(`text="Upload now!!"`)).toBeVisible()
   await typebotViewer(page)
     .locator(`input[type="file"]`)

apps/viewer/playwright/tests/fileUpload.spec.ts

@@ -5,9 +5,8 @@ import { parse } from 'papaparse'
 import { typebotViewer } from '../services/selectorUtils'
 import { importTypebotInDatabase } from '../services/database'
 import { readFileSync } from 'fs'
-import { isDefined } from 'utils'
 
-test('should work as expected', async ({ page, browser }) => {
+test('should work as expected', async ({ page }) => {
   const typebotId = cuid()
   await importTypebotInDatabase(
     path.join(__dirname, '../fixtures/typebots/fileUpload.json'),

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">

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

@@ -243,6 +243,8 @@ const ChatChunks = ({
   keepShowingHostAvatar,
   onDisplayNextBlock,
 }: Props) => {
+  const [isSkipped, setIsSkipped] = useState(false)
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const avatarSideContainerRef = useRef<any>()
 
@@ -250,6 +252,11 @@ const ChatChunks = ({
     refreshTopOffset()
   })
 
+  const skipInput = () => {
+    onDisplayNextBlock()
+    setIsSkipped(true)
+  }
+
   const refreshTopOffset = () =>
     avatarSideContainerRef.current?.refreshTopOffset()
 
@@ -260,7 +267,9 @@ const ChatChunks = ({
           <AvatarSideContainer
             ref={avatarSideContainerRef}
             hostAvatarSrc={hostAvatar.src}
-            keepShowing={keepShowingHostAvatar || isDefined(input)}
+            keepShowing={
+              (keepShowingHostAvatar || isDefined(input)) && !isSkipped
+            }
           />
         )}
         <div
@@ -287,21 +296,24 @@ const ChatChunks = ({
           </TransitionGroup>
         </div>
       </div>
-      <CSSTransition
+      {!isSkipped && (
-        classNames="bubble"
+        <CSSTransition
-        timeout={500}
+          classNames="bubble"
-        unmountOnExit
+          timeout={500}
-        in={isDefined(input)}
+          unmountOnExit
-      >
+          in={isDefined(input)}
-        {input && (
+        >
-          <InputChatBlock
+          {input && (
-            block={input}
+            <InputChatBlock
-            onTransitionEnd={onDisplayNextBlock}
+              block={input}
-            hasAvatar={hostAvatar.isEnabled}
+              onTransitionEnd={onDisplayNextBlock}
-            hasGuestAvatar={hasGuestAvatar}
+              onSkip={skipInput}
-          />
+              hasAvatar={hostAvatar.isEnabled}
-        )}
+              hasGuestAvatar={hasGuestAvatar}
-      </CSSTransition>
+            />
+          )}
+        </CSSTransition>
+      )}
     </>
   )
 }

packages/models/src/typebot/blocks/input/file.ts

@@ -3,6 +3,7 @@ import { InputBlockType, optionBaseSchema, blockBaseSchema } from '../shared'
 
 export const fileInputOptionsSchema = optionBaseSchema.and(
   z.object({
+    isRequired: z.boolean().optional(),
     isMultipleAllowed: z.boolean(),
     labels: z.object({
       placeholder: z.string(),
@@ -20,6 +21,7 @@ export const fileInputStepSchema = blockBaseSchema.and(
 )
 
 export const defaultFileInputOptions: FileInputOptions = {
+  isRequired: true,
   isMultipleAllowed: false,
   labels: {
     placeholder: `<strong>