feat(inputs): ✨ Add URL input

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