feat(engine): ✨ Add retry bubbles

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

@@ -14,6 +14,7 @@ import {
 } from 'utils'
 import { executeLogic } from 'services/logic'
 import { executeIntegration } from 'services/integration'
+import { parseRetryStep, stepCanBeRetried } from 'services/inputs'
 
 type ChatBlockProps = {
   steps: PublicStep[]
@@ -30,7 +31,7 @@ export const ChatBlock = ({
   onScroll,
   onBlockEnd,
 }: ChatBlockProps) => {
-  const { typebot, updateVariableValue } = useTypebot()
+  const { typebot, updateVariableValue, createEdge } = useTypebot()
   const [displayedSteps, setDisplayedSteps] = useState<PublicStep[]>([])
 
   const currentStepIndex = displayedSteps.length - 1
@@ -70,9 +71,15 @@ export const ChatBlock = ({
     }
   }
 
-  const displayNextStep = (answerContent?: string) => {
+  const displayNextStep = (answerContent?: string, isRetry?: boolean) => {
     const currentStep = [...displayedSteps].pop()
+    console.log(currentStep)
     if (currentStep) {
+      if (isRetry && stepCanBeRetried(currentStep))
+        return setDisplayedSteps([
+          ...displayedSteps,
+          parseRetryStep(currentStep, typebot.variables, createEdge),
+        ])
       if (
         isInputStep(currentStep) &&
         currentStep.options?.variableId &&

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

@@ -1,26 +1,27 @@
 import React, { useEffect, useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
 import { useHostAvatars } from '../../../contexts/HostAvatarsContext'
-import { InputStep, InputStepType, PublicStep, Step } from 'models'
+import { InputStep, InputStepType, PublicStep } from 'models'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { TextForm } from './inputs/TextForm'
 import { isBubbleStep, isInputStep } from 'utils'
 import { DateForm } from './inputs/DateForm'
 import { ChoiceForm } from './inputs/ChoiceForm'
 import { HostBubble } from './bubbles/HostBubble'
+import { isInputValid } from 'services/inputs'
 
 export const ChatStep = ({
   step,
   onTransitionEnd,
 }: {
   step: PublicStep
-  onTransitionEnd: (answerContent?: string) => void
+  onTransitionEnd: (answerContent?: string, isRetry?: boolean) => void
 }) => {
   const { addAnswer } = useAnswers()
 
-  const handleInputSubmit = (content: string) => {
-    addAnswer({ stepId: step.id, blockId: step.blockId, content })
-    onTransitionEnd(content)
+  const handleInputSubmit = (content: string, isRetry: boolean) => {
+    if (!isRetry) addAnswer({ stepId: step.id, blockId: step.blockId, content })
+    onTransitionEnd(content, isRetry)
   }
 
   if (isBubbleStep(step))
@@ -35,7 +36,7 @@ const InputChatStep = ({
   onSubmit,
 }: {
   step: InputStep
-  onSubmit: (value: string) => void
+  onSubmit: (value: string, isRetry: boolean) => void
 }) => {
   const { addNewAvatarOffset } = useHostAvatars()
   const [answer, setAnswer] = useState<string>()
@@ -47,7 +48,7 @@ const InputChatStep = ({
 
   const handleSubmit = (value: string) => {
     setAnswer(value)
-    onSubmit(value)
+    onSubmit(value, !isInputValid(value, step.type))
   }
 
   if (answer) {