feat(engine): ♿️ Smarter website input

apps/builder/playwright/tests/editor.spec.ts

@@ -71,8 +71,6 @@ test.describe.parallel('Editor', () => {
     await expect(page.locator('[data-testid="step"] >> nth=2')).toHaveText(
       'Hello!'
     )
-    await page.dragAndDrop('text=Hello', '[data-testid="step"] >> text=Start')
-    await expect(page.locator('text=Block #4')).toBeVisible()
     await page.dragAndDrop('text=Hello', 'text=Block #2')
     await expect(page.locator('[data-testid="step"] >> nth=3')).toHaveText(
       'Hello!'

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

@@ -42,7 +42,7 @@ test.describe('Url input step', () => {
     await page.click('text=Restart')
     await typebotViewer(page)
       .locator(`input[placeholder="Your URL..."]`)
-      .fill('gg://test.com')
+      .fill('https://https://test')
     await typebotViewer(page).locator('button >> text="Go"').click()
     await expect(
       typebotViewer(page).locator('text=Try again bro')

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

@@ -1,5 +1,6 @@
 import {
   EmailInputStep,
+  InputStepType,
   NumberInputStep,
   PhoneNumberInputStep,
   TextInputStep,
@@ -23,7 +24,14 @@ type TextFormProps = {
 export const TextForm = ({ step, onSubmit, defaultValue }: TextFormProps) => {
   const [inputValue, setInputValue] = useState(defaultValue ?? '')
 
-  const handleChange = (inputValue: string) => setInputValue(inputValue)
+  const handleChange = (inputValue: string) => {
+    if (step.type === InputStepType.URL && !inputValue.startsWith('https://'))
+      return inputValue === 'https:/'
+        ? undefined
+        : setInputValue(`https://${inputValue}`)
+
+    setInputValue(inputValue)
+  }
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault()
@@ -39,11 +47,7 @@ export const TextForm = ({ step, onSubmit, defaultValue }: TextFormProps) => {
           onSubmit={handleSubmit}
           data-testid="input"
         >
-          <TextInput
+          <TextInput step={step} onChange={handleChange} value={inputValue} />
-            step={step}
-            onChange={handleChange}
-            defaultValue={defaultValue ?? ''}
-          />
           <SendButton
             label={step.options?.labels?.button ?? 'Send'}
             isDisabled={inputValue === ''}

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

@@ -22,11 +22,11 @@ type TextInputProps = {
     | NumberInputStep
     | UrlInputStep
     | PhoneNumberInputStep
-  defaultValue: string
+  value: string
   onChange: (value: string) => void
 }
 
-export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
+export const TextInput = ({ step, value, onChange }: TextInputProps) => {
   const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null)
 
   useEffect(() => {
@@ -47,19 +47,19 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
       return step.options?.isLong ? (
         <LongTextInput
           ref={inputRef as unknown as RefObject<HTMLTextAreaElement>}
+          value={value}
           placeholder={
             step.options?.labels?.placeholder ?? 'Type your answer...'
           }
-          defaultValue={defaultValue}
           onChange={handleInputChange}
         />
       ) : (
         <ShortTextInput
           ref={inputRef}
+          value={value}
           placeholder={
             step.options?.labels?.placeholder ?? 'Type your answer...'
           }
-          defaultValue={defaultValue}
           onChange={handleInputChange}
         />
       )
@@ -68,10 +68,10 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
       return (
         <ShortTextInput
           ref={inputRef}
+          value={value}
           placeholder={
             step.options?.labels?.placeholder ?? 'Type your email...'
           }
-          defaultValue={defaultValue}
           onChange={handleInputChange}
           type="email"
         />
@@ -81,10 +81,10 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
       return (
         <ShortTextInput
           ref={inputRef}
+          value={value}
           placeholder={
             step.options?.labels?.placeholder ?? 'Type your answer...'
           }
-          defaultValue={defaultValue}
           onChange={handleInputChange}
           type="number"
           style={{ appearance: 'auto' }}
@@ -98,8 +98,8 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
       return (
         <ShortTextInput
           ref={inputRef}
+          value={value}
           placeholder={step.options?.labels?.placeholder ?? 'Type your URL...'}
-          defaultValue={defaultValue}
           onChange={handleInputChange}
           type="url"
         />
@@ -110,8 +110,8 @@ export const TextInput = ({ step, defaultValue, onChange }: TextInputProps) => {
         <PhoneInput
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={inputRef as any}
+          value={value}
           onChange={handlePhoneNumberChange}
-          defaultValue={defaultValue}
           placeholder={
             step.options.labels.placeholder ?? 'Your phone number...'
           }
@@ -141,7 +141,7 @@ const LongTextInput = React.forwardRef(
   (
     props: {
       placeholder: string
-      defaultValue: string
+      value: string
       onChange: ChangeEventHandler
     },
     ref: React.ForwardedRef<HTMLTextAreaElement>

packages/bot-engine/src/services/inputs.ts

@@ -16,7 +16,7 @@ import { parseVariables } from './variable'
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 const urlRegex =
-  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
+  /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)$/
 
 export const isInputValid = (
   inputValue: string,