feat(engine): ♿️ Smarter website input

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
-            step={step}
-            onChange={handleChange}
-            defaultValue={defaultValue ?? ''}
-          />
+          <TextInput step={step} onChange={handleChange} value={inputValue} />
           <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,