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

packages/models/src/typebot/steps.ts

@@ -2,34 +2,53 @@ export type Step = StartStep | BubbleStep | InputStep
 
 export type BubbleStep = TextStep
 
-export type InputStep = TextInputStep
+export type InputStep = TextInputStep | NumberInputStep
 
-export enum StepType {
-  START = 'start',
+export type StepType = 'start' | BubbleStepType | InputStepType
+
+export enum BubbleStepType {
   TEXT = 'text',
-  TEXT_INPUT = 'text input',
+}
+
+export enum InputStepType {
+  TEXT = 'text input',
+  NUMBER = 'number input',
 }
 
 export type StepBase = { id: string; blockId: string; target?: Target }
 
 export type StartStep = StepBase & {
-  type: StepType.START
+  type: 'start'
   label: string
 }
 
 export type TextStep = StepBase & {
-  type: StepType.TEXT
+  type: BubbleStepType.TEXT
   content: { html: string; richText: unknown[]; plainText: string }
 }
 
 export type TextInputStep = StepBase & {
-  type: StepType.TEXT_INPUT
+  type: InputStepType.TEXT
   options?: TextInputOptions
 }
 
-export type TextInputOptions = {
+export type NumberInputStep = StepBase & {
+  type: InputStepType.NUMBER
+  options?: NumberInputOptions
+}
+
+type InputOptionsBase = {
   labels?: { placeholder?: string; button?: string }
+}
+
+export type TextInputOptions = InputOptionsBase & {
   isLong?: boolean
 }
 
+export type NumberInputOptions = InputOptionsBase & {
+  min?: number
+  max?: number
+  step?: number
+}
+
 export type Target = { blockId: string; stepId?: string }

packages/utils/src/utils.ts

@@ -1,4 +1,12 @@
-import { Table } from 'models'
+import {
+  BubbleStepType,
+  InputStep,
+  InputStepType,
+  Step,
+  Table,
+  TextInputStep,
+  TextStep,
+} from 'models'
 
 export const sendRequest = async <ResponseData>({
   url,
@@ -32,3 +40,12 @@ export const filterTable = <T>(ids: string[], table: Table<T>): Table<T> => ({
   byId: ids.reduce((acc, id) => ({ ...acc, [id]: table.byId[id] }), {}),
   allIds: ids,
 })
+
+export const isInputStep = (step: Step): step is InputStep =>
+  (Object.values(InputStepType) as string[]).includes(step.type)
+
+export const isTextBubbleStep = (step: Step): step is TextStep =>
+  step.type === BubbleStepType.TEXT
+
+export const isTextInputStep = (step: Step): step is TextInputStep =>
+  step.type === InputStepType.TEXT