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,13 +243,20 @@ const ChatChunks = ({
  keepShowingHostAvatar,
  onDisplayNextBlock,
 }: Props) => {
+ const [isSkipped, setIsSkipped] = useState(false)
+
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const avatarSideContainerRef = useRef<any>()
 
  useEffect(() => {
  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
- classNames="bubble"
- timeout={500}
- unmountOnExit
- in={isDefined(input)}
- >
- {input && (
- <InputChatBlock
- block={input}
- onTransitionEnd={onDisplayNextBlock}
- hasAvatar={hostAvatar.isEnabled}
- hasGuestAvatar={hasGuestAvatar}
- />
- )}
- </CSSTransition>
+ {!isSkipped && (
+ <CSSTransition
+ classNames="bubble"
+ timeout={500}
+ unmountOnExit
+ in={isDefined(input)}
+ >
+ {input && (
+ <InputChatBlock
+ block={input}
+ onTransitionEnd={onDisplayNextBlock}
+ onSkip={skipInput}
+ hasAvatar={hostAvatar.isEnabled}
+ hasGuestAvatar={hasGuestAvatar}
+ />
+ )}
+ </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>