feat(inputs): ✨ Add text options

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

@@ -19,6 +19,9 @@ export const AvatarSideContainer = () => {
       setMarginBottom(isMobile ? 38 : 48)
     })
     resizeObserver.observe(document.body)
+    return () => {
+      resizeObserver.disconnect()
+    }
   }, [])
 
   return (

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
 import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
-import { Step } from 'models'
+import { InputStep, Step } from 'models'
 import { isTextInputStep, isTextStep } from '../../../services/utils'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { HostMessageBubble } from './bubbles/HostMessageBubble'
@@ -24,11 +24,17 @@ export const ChatStep = ({
   if (isTextStep(step))
     return <HostMessageBubble step={step} onTransitionEnd={onTransitionEnd} />
   if (isTextInputStep(step))
-    return <InputChatStep onSubmit={handleInputSubmit} />
+    return <InputChatStep step={step} onSubmit={handleInputSubmit} />
   return <span>No step</span>
 }
 
-const InputChatStep = ({ onSubmit }: { onSubmit: (value: string) => void }) => {
+const InputChatStep = ({
+  step,
+  onSubmit,
+}: {
+  step: InputStep
+  onSubmit: (value: string) => void
+}) => {
   const { addNewAvatarOffset } = useHostAvatars()
   const [answer, setAnswer] = useState<string>()
 
@@ -44,5 +50,5 @@ const InputChatStep = ({ onSubmit }: { onSubmit: (value: string) => void }) => {
   if (answer) {
     return <GuestBubble message={answer} />
   }
-  return <TextInput onSubmit={handleSubmit} />
+  return <TextInput step={step} onSubmit={handleSubmit} />
 }

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

@@ -1,11 +1,13 @@
+import { TextInputStep } from 'models'
 import React, { FormEvent, useRef, useState } from 'react'
 import { SendIcon } from '../../../../assets/icons'
 
 type TextInputProps = {
+  step: TextInputStep
   onSubmit: (value: string) => void
 }
 
-export const TextInput = ({ onSubmit }: TextInputProps) => {
+export const TextInput = ({ step, onSubmit }: TextInputProps) => {
   const inputRef = useRef(null)
   const [inputValue, setInputValue] = useState('')
 
@@ -19,24 +21,43 @@ export const TextInput = ({ onSubmit }: TextInputProps) => {
     <div className="flex flex-col w-full lg:w-4/6">
       <div className="flex items-center">
         <form
-          className="flex items-center justify-between rounded-lg pr-2 typebot-input"
+          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="text"
-            placeholder={'Type your answer...'}
-            onChange={(e) => setInputValue(e.target.value)}
-            required
-          />
+          {step.options?.isLong ? (
+            <textarea
+              ref={inputRef}
+              className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+              placeholder={
+                step.options?.labels?.placeholder ?? 'Type your answer...'
+              }
+              onChange={(e) => setInputValue(e.target.value)}
+              rows={4}
+              data-testid="textarea"
+              required
+            />
+          ) : (
+            <input
+              ref={inputRef}
+              className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+              type="text"
+              placeholder={
+                step.options?.labels?.placeholder ?? 'Type your answer...'
+              }
+              onChange={(e) => setInputValue(e.target.value)}
+              required
+            />
+          )}
           <button
             type="submit"
             className={
-              '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'
+              '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">Submit</span>
+            <span className="hidden xs:flex">
+              {step.options?.labels?.button ?? 'Send'}
+            </span>
             <SendIcon className="send-icon flex xs:hidden" />
           </button>
         </form>

packages/models/src/typebot/steps.ts

@@ -24,6 +24,12 @@ export type TextStep = StepBase & {
 
 export type TextInputStep = StepBase & {
   type: StepType.TEXT_INPUT
+  options?: TextInputOptions
+}
+
+export type TextInputOptions = {
+  labels?: { placeholder?: string; button?: string }
+  isLong?: boolean
 }
 
 export type Target = { blockId: string; stepId?: string }