feat(inputs): ✨ Add number input

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
 import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
-import { InputStep, Step } from 'models'
-import { isTextInputStep, isTextStep } from '../../../services/utils'
+import { InputStep, InputStepType, Step } from 'models'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'
 import { TextInput } from './inputs/TextInput'
+import { isInputStep, isTextBubbleStep, isTextInputStep } from 'utils'
+import { NumberInput } from './inputs/NumberInput'
 
 export const ChatStep = ({
   step,
@@ -21,9 +22,9 @@ export const ChatStep = ({
     onTransitionEnd()
   }
 
-  if (isTextStep(step))
+  if (isTextBubbleStep(step))
     return <HostMessageBubble step={step} onTransitionEnd={onTransitionEnd} />
-  if (isTextInputStep(step))
+  if (isInputStep(step))
     return <InputChatStep step={step} onSubmit={handleInputSubmit} />
   return <span>No step</span>
 }
@@ -50,5 +51,10 @@ const InputChatStep = ({
   if (answer) {
     return <GuestBubble message={answer} />
   }
-  return <TextInput step={step} onSubmit={handleSubmit} />
+  switch (step.type) {
+    case InputStepType.TEXT:
+      return <TextInput step={step} onSubmit={handleSubmit} />
+    case InputStepType.NUMBER:
+      return <NumberInput step={step} onSubmit={handleSubmit} />
+  }
 }

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useHostAvatars } from '../../../../contexts/HostAvatarsContext'
 import { useTypebot } from '../../../../contexts/TypebotContext'
-import { StepType, TextStep } from 'models'
+import { BubbleStepType, StepType, TextStep } from 'models'
 import { computeTypingTimeout } from '../../../../services/chat'
 import { TypingContent } from './TypingContent'
 
@@ -62,7 +62,7 @@ export const HostMessageBubble = ({
           >
             {isTyping ? <TypingContent /> : <></>}
           </div>
-          {step.type === StepType.TEXT && (
+          {step.type === BubbleStepType.TEXT && (
             <p
               style={{
                 textOverflow: 'ellipsis',

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

@@ -0,0 +1,57 @@
+import { NumberInputStep, TextInputStep } from 'models'
+import React, { FormEvent, useRef, useState } from 'react'
+import { SendIcon } from '../../../../assets/icons'
+
+type NumberInputProps = {
+  step: NumberInputStep
+  onSubmit: (value: string) => void
+}
+
+export const NumberInput = ({ step, onSubmit }: NumberInputProps) => {
+  const inputRef = useRef(null)
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (inputValue === '') return
+    onSubmit(inputValue)
+  }
+
+  return (
+    <div className="flex flex-col w-full lg:w-4/6">
+      <div className="flex items-center">
+        <form
+          className="flex items-end justify-between rounded-lg pr-2 typebot-input"
+          onSubmit={handleSubmit}
+        >
+          <input
+            ref={inputRef}
+            className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+            type="number"
+            placeholder={
+              step.options?.labels?.placeholder ?? 'Type your answer...'
+            }
+            onChange={(e) => setInputValue(e.target.value)}
+            style={{ appearance: 'auto' }}
+            min={step.options?.min}
+            max={step.options?.max}
+            step={step.options?.step}
+            required
+          />
+          <button
+            type="submit"
+            className={
+              'my-2 ml-2 py-2 px-4 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 active'
+            }
+            disabled={inputValue === ''}
+          >
+            <span className="hidden xs:flex">
+              {step.options?.labels?.button ?? 'Send'}
+            </span>
+            <SendIcon className="send-icon flex xs:hidden" />
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

packages/bot-engine/src/index.ts

@@ -1 +1,3 @@
 export * from './components/TypebotViewer'
+
+export * from 'util'

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

@@ -1,7 +0,0 @@
-import { Step, TextStep, StepType, TextInputStep } from 'models'
-
-export const isTextStep = (step: Step): step is TextStep =>
-  step.type === StepType.TEXT
-
-export const isTextInputStep = (step: Step): step is TextInputStep =>
-  step.type === StepType.TEXT_INPUT