feat(inputs): ✨ Add URL input

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -2,6 +2,7 @@ import {
   ChatIcon,
   EmailIcon,
   FlagIcon,
+  GlobeIcon,
   NumberIcon,
   TextIcon,
 } from 'assets/icons'
@@ -24,6 +25,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
     case InputStepType.EMAIL: {
       return <EmailIcon />
     }
+    case InputStepType.URL: {
+      return <GlobeIcon />
+    }
     case 'start': {
       return <FlagIcon />
     }

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -16,6 +16,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case InputStepType.EMAIL: {
       return <Text>Email</Text>
     }
+    case InputStepType.URL: {
+      return <Text>Website</Text>
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -4,6 +4,7 @@ import { InputStepType, Step, TextInputOptions } from 'models'
 import { EmailInputSettingsBody } from './EmailInputSettingsBody'
 import { NumberInputSettingsBody } from './NumberInputSettingsBody'
 import { TextInputSettingsBody } from './TextInputSettingsBody'
+import { UrlInputSettingsBody } from './UrlInputSettingsBody'
 
 type Props = {
   step: Step
@@ -51,6 +52,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
         />
       )
     }
+    case InputStepType.URL: {
+      return (
+        <UrlInputSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/UrlInputSettingsBody.tsx

@@ -0,0 +1,46 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { UrlInputOptions } from 'models'
+import React from 'react'
+
+type UrlInputSettingsBodyProps = {
+  options?: UrlInputOptions
+  onOptionsChange: (options: UrlInputOptions) => void
+}
+
+export const UrlInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: UrlInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options?.labels?.placeholder ?? 'Type your URL...'}
+          delay={100}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options?.labels?.button ?? 'Send'}
+          delay={100}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeLabel.tsx

@@ -39,6 +39,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
         </Text>
       )
     }
+    case InputStepType.URL: {
+      return (
+        <Text color={'gray.500'}>
+          {props.options?.labels?.placeholder ?? 'Type your URL...'}
+        </Text>
+      )
+    }
     case 'start': {
       return <Text>{props.label}</Text>
     }

apps/builder/cypress/tests/inputs.ts

@@ -21,8 +21,11 @@ describe('Text input', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
-    getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
+    getIframeBody()
-    getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
+      .findByPlaceholderText('Type your answer...')
+      .should('have.attr', 'type')
+      .should('equal', 'text')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })
       .clear()
@@ -50,8 +53,11 @@ describe('Number input', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
-    getIframeBody().findByPlaceholderText('Type your answer...').should('exist')
+    getIframeBody()
-    getIframeBody().findByRole('button', { name: 'Send' }).should('exist')
+      .findByPlaceholderText('Type your answer...')
+      .should('have.attr', 'type')
+      .should('equal', 'number')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })
       .clear()
@@ -84,8 +90,13 @@ describe('Email input', () => {
     cy.signIn('test2@gmail.com')
     cy.visit('/typebots/typebot3/edit')
     cy.findByRole('button', { name: 'Preview' }).click()
-    getIframeBody().findByPlaceholderText('Type your email...').should('exist')
+    getIframeBody()
+      .findByPlaceholderText('Type your email...')
+      .should('have.attr', 'type')
+      .should('equal', 'email')
     getIframeBody().findByRole('button', { name: 'Send' })
+    getIframeBody().findByPlaceholderText('Type your email...').should('exist')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
     cy.findByTestId('step-step1').click({ force: true })
     cy.findByRole('textbox', { name: 'Placeholder:' })
       .clear()
@@ -98,6 +109,34 @@ describe('Email input', () => {
   })
 })
 
+describe('URL input', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    createTypebotWithStep({ type: InputStepType.URL })
+    cy.signOut()
+  })
+
+  it('options should work', () => {
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot3/edit')
+    cy.findByRole('button', { name: 'Preview' }).click()
+    getIframeBody()
+      .findByPlaceholderText('Type your URL...')
+      .should('have.attr', 'type')
+      .should('eq', 'url')
+    getIframeBody().findByRole('button', { name: 'Send' }).should('be.disabled')
+    cy.findByTestId('step-step1').click({ force: true })
+    cy.findByRole('textbox', { name: 'Placeholder:' })
+      .clear()
+      .type('Your URL...')
+    cy.findByRole('textbox', { name: 'Button label:' }).clear().type('Go')
+    cy.findByTestId('step-step1').should('contain.text', 'Your URL...')
+    cy.findByRole('button', { name: 'Restart' }).click()
+    getIframeBody().findByPlaceholderText('Your URL...').should('exist')
+    getIframeBody().findByRole('button', { name: 'Go' })
+  })
+})
+
 const createTypebotWithStep = (step: Omit<InputStep, 'id' | 'blockId'>) => {
   cy.task(
     'createTypebot',

packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx

@@ -54,6 +54,7 @@ const InputChatStep = ({
     case InputStepType.TEXT:
     case InputStepType.NUMBER:
     case InputStepType.EMAIL:
+    case InputStepType.URL:
       return <TextForm step={step} onSubmit={handleSubmit} />
   }
 }

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx

@@ -1,10 +1,15 @@
-import { EmailInputStep, NumberInputStep, TextInputStep } from 'models'
+import {
+  EmailInputStep,
+  NumberInputStep,
+  TextInputStep,
+  UrlInputStep,
+} from 'models'
 import React, { FormEvent, useState } from 'react'
 import { SendIcon } from '../../../../../assets/icons'
 import { TextInput } from './TextInputContent'
 
 type TextFormProps = {
-  step: TextInputStep | EmailInputStep | NumberInputStep
+  step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
   onSubmit: (value: string) => void
 }
 

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx

@@ -3,6 +3,7 @@ import {
   EmailInputStep,
   NumberInputStep,
   InputStepType,
+  UrlInputStep,
 } from 'models'
 import React, {
   ChangeEvent,
@@ -13,7 +14,7 @@ import React, {
 } from 'react'
 
 type TextInputProps = {
-  step: TextInputStep | EmailInputStep | NumberInputStep
+  step: TextInputStep | EmailInputStep | NumberInputStep | UrlInputStep
   onChange: (value: string) => void
 }
 
@@ -77,6 +78,16 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
         />
       )
     }
+    case InputStepType.URL: {
+      return (
+        <ShortTextInput
+          ref={inputRef}
+          placeholder={step.options?.labels?.placeholder ?? 'Type your URL...'}
+          onChange={handleInputChange}
+          type="url"
+        />
+      )
+    }
   }
 }
 

packages/models/src/typebot/steps.ts

@@ -2,7 +2,11 @@ export type Step = StartStep | BubbleStep | InputStep
 
 export type BubbleStep = TextStep
 
-export type InputStep = TextInputStep | NumberInputStep | EmailInputStep
+export type InputStep =
+  | TextInputStep
+  | NumberInputStep
+  | EmailInputStep
+  | UrlInputStep
 
 export type StepType = 'start' | BubbleStepType | InputStepType
 
@@ -14,6 +18,7 @@ export enum InputStepType {
   TEXT = 'text input',
   NUMBER = 'number input',
   EMAIL = 'email input',
+  URL = 'url input',
 }
 
 export type StepBase = { id: string; blockId: string; target?: Target }
@@ -43,8 +48,15 @@ export type EmailInputStep = StepBase & {
   options?: EmailInputOptions
 }
 
+export type UrlInputStep = StepBase & {
+  type: InputStepType.URL
+  options?: UrlInputOptions
+}
+
 export type EmailInputOptions = InputOptionsBase
 
+export type UrlInputOptions = InputOptionsBase
+
 type InputOptionsBase = {
   labels?: { placeholder?: string; button?: string }
 }