refactor: ♻️ Rename step to block

2022-06-11 07:27:38 +02:00
parent 8751766d0e
commit 2df8338505
297 changed files with 4292 additions and 3989 deletions
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostBubble.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/HostBubble.tsx
@ -1,24 +0,0 @@
-import { BubbleStep, BubbleStepType } from 'models'
-import React from 'react'
-import { EmbedBubble } from './EmbedBubble'
-import { ImageBubble } from './ImageBubble'
-import { TextBubble } from './TextBubble'
-import { VideoBubble } from './VideoBubble'
-
-type Props = {
-  step: BubbleStep
-  onTransitionEnd: () => void
-}
-
-export const HostBubble = ({ step, onTransitionEnd }: Props) => {
-  switch (step.type) {
-    case BubbleStepType.TEXT:
-      return <TextBubble step={step} onTransitionEnd={onTransitionEnd} />
-    case BubbleStepType.IMAGE:
-      return <ImageBubble step={step} onTransitionEnd={onTransitionEnd} />
-    case BubbleStepType.VIDEO:
-      return <VideoBubble step={step} onTransitionEnd={onTransitionEnd} />
-    case BubbleStepType.EMBED:
-      return <EmbedBubble step={step} onTransitionEnd={onTransitionEnd} />
-  }
-}
--- a/packages/bot-engine/src/components/ChatBlock/ChatStep/index.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/index.tsx
@ -1 +0,0 @@
-export { InputChatStep } from './InputChatStep'
--- a/packages/bot-engine/src/components/ChatBlock/index.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/index.tsx
@ -1 +0,0 @@
-export { ChatBlock } from './ChatBlock'
--- a/packages/bot-engine/src/components/ChatGroup/AvatarSideContainer.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/AvatarSideContainer.tsx
@ -20,13 +20,13 @@ export const AvatarSideContainer = forwardRef(
    const [avatarTopOffset, setAvatarTopOffset] = useState(0)

    const refreshTopOffset = () => {
-      if (!scrollingSideBlockRef.current || !avatarContainer.current) return
-      const { height } = scrollingSideBlockRef.current.getBoundingClientRect()
+      if (!scrollingSideGroupRef.current || !avatarContainer.current) return
+      const { height } = scrollingSideGroupRef.current.getBoundingClientRect()
      const { height: avatarHeight } =
        avatarContainer.current.getBoundingClientRect()
      setAvatarTopOffset(height - avatarHeight)
    }
-    const scrollingSideBlockRef = useRef<HTMLDivElement>(null)
+    const scrollingSideGroupRef = useRef<HTMLDivElement>(null)
    const avatarContainer = useRef<HTMLDivElement>(null)
    useImperativeHandle(ref, () => ({
      refreshTopOffset,
@ -45,7 +45,7 @@ export const AvatarSideContainer = forwardRef(
    return (
      <div
        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container "
-        ref={scrollingSideBlockRef}
+        ref={scrollingSideGroupRef}
      >
        <CSSTransition
          classNames="bubble"
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/InputChatBlock.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/InputChatBlock.tsx
@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useAnswers } from '../../../contexts/AnswersContext'
-import { InputStep, InputStepType } from 'models'
+import { InputBlock, InputBlockType } from 'models'
 import { GuestBubble } from './bubbles/GuestBubble'
 import { TextForm } from './inputs/TextForm'
 import { byId } from 'utils'
@ -12,13 +12,13 @@ import { isInputValid } from 'services/inputs'
 import { PaymentForm } from './inputs/PaymentForm'
 import { RatingForm } from './inputs/RatingForm'

-export const InputChatStep = ({
-  step,
+export const InputChatBlock = ({
+  block,
  hasAvatar,
  hasGuestAvatar,
  onTransitionEnd,
 }: {
-  step: InputStep
+  block: InputBlock
  hasGuestAvatar: boolean
  hasAvatar: boolean
  onTransitionEnd: (answerContent?: string, isRetry?: boolean) => void
@ -28,7 +28,7 @@ export const InputChatStep = ({
  const [answer, setAnswer] = useState<string>()
  const [isEditting, setIsEditting] = useState(false)

-  const { variableId } = step.options
+  const { variableId } = block.options
  const defaultValue =
    typebot.settings.general.isInputPrefillEnabled ?? true
      ? variableId && typebot.variables.find(byId(variableId))?.value
@ -36,11 +36,11 @@ export const InputChatStep = ({

  const handleSubmit = async (content: string) => {
    setAnswer(content)
-    const isRetry = !isInputValid(content, step.type)
+    const isRetry = !isInputValid(content, block.type)
    if (!isRetry && addAnswer)
      await addAnswer({
-        stepId: step.id,
-        blockId: step.blockId,
+        blockId: block.id,
+        groupId: block.groupId,
        content,
        variableId: variableId ?? null,
      })
@ -71,7 +71,7 @@ export const InputChatStep = ({
        <div className="flex w-6 xs:w-10 h-6 xs:h-10 mr-2 mb-2 mt-1 flex-shrink-0 items-center" />
      )}
      <Input
-        step={step}
+        block={block}
        onSubmit={handleSubmit}
        defaultValue={defaultValue?.toString()}
        hasGuestAvatar={hasGuestAvatar}
@ -81,42 +81,42 @@ export const InputChatStep = ({
 }

 const Input = ({
-  step,
+  block,
  onSubmit,
  defaultValue,
  hasGuestAvatar,
 }: {
-  step: InputStep
+  block: InputBlock
  onSubmit: (value: string) => void
  defaultValue?: string
  hasGuestAvatar: boolean
 }) => {
-  switch (step.type) {
-    case InputStepType.TEXT:
-    case InputStepType.NUMBER:
-    case InputStepType.EMAIL:
-    case InputStepType.URL:
-    case InputStepType.PHONE:
+  switch (block.type) {
+    case InputBlockType.TEXT:
+    case InputBlockType.NUMBER:
+    case InputBlockType.EMAIL:
+    case InputBlockType.URL:
+    case InputBlockType.PHONE:
      return (
        <TextForm
-          step={step}
+          block={block}
          onSubmit={onSubmit}
          defaultValue={defaultValue}
          hasGuestAvatar={hasGuestAvatar}
        />
      )
-    case InputStepType.DATE:
-      return <DateForm options={step.options} onSubmit={onSubmit} />
-    case InputStepType.CHOICE:
-      return <ChoiceForm step={step} onSubmit={onSubmit} />
-    case InputStepType.PAYMENT:
+    case InputBlockType.DATE:
+      return <DateForm options={block.options} onSubmit={onSubmit} />
+    case InputBlockType.CHOICE:
+      return <ChoiceForm block={block} onSubmit={onSubmit} />
+    case InputBlockType.PAYMENT:
      return (
        <PaymentForm
-          options={step.options}
-          onSuccess={() => onSubmit(step.options.labels.success ?? 'Success')}
+          options={block.options}
+          onSuccess={() => onSubmit(block.options.labels.success ?? 'Success')}
        />
      )
-    case InputStepType.RATING:
-      return <RatingForm step={step} onSubmit={onSubmit} />
+    case InputBlockType.RATING:
+      return <RatingForm block={block} onSubmit={onSubmit} />
  }
 }
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
@ -1,24 +1,24 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { EmbedBubbleStep } from 'models'
+import { EmbedBubbleBlock } from 'models'
 import { TypingContent } from './TypingContent'
 import { parseVariables } from 'services/variable'
 import { useTypebot } from 'contexts/TypebotContext'

 type Props = {
-  step: EmbedBubbleStep
+  block: EmbedBubbleBlock
  onTransitionEnd: () => void
 }

 export const showAnimationDuration = 400

-export const EmbedBubble = ({ step, onTransitionEnd }: Props) => {
+export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
  const { typebot } = useTypebot()
  const messageContainer = useRef<HTMLDivElement | null>(null)
  const [isTyping, setIsTyping] = useState(true)

  const url = useMemo(
-    () => parseVariables(typebot.variables)(step.content?.url),
-    [step.content?.url, typebot.variables]
+    () => parseVariables(typebot.variables)(block.content?.url),
+    [block.content?.url, typebot.variables]
  )

  useEffect(() => {
@ -65,7 +65,7 @@ export const EmbedBubble = ({ step, onTransitionEnd }: Props) => {
              (isTyping ? 'opacity-0' : 'opacity-100')
            }
            style={{
-              height: isTyping ? '2rem' : step.content.height,
+              height: isTyping ? '2rem' : block.content.height,
              borderRadius: '15px',
            }}
          />
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/GuestBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/GuestBubble.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/HostBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/HostBubble.tsx
@ -0,0 +1,24 @@
+import { BubbleBlock, BubbleBlockType } from 'models'
+import React from 'react'
+import { EmbedBubble } from './EmbedBubble'
+import { ImageBubble } from './ImageBubble'
+import { TextBubble } from './TextBubble'
+import { VideoBubble } from './VideoBubble'
+
+type Props = {
+  block: BubbleBlock
+  onTransitionEnd: () => void
+}
+
+export const HostBubble = ({ block, onTransitionEnd }: Props) => {
+  switch (block.type) {
+    case BubbleBlockType.TEXT:
+      return <TextBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.IMAGE:
+      return <ImageBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.VIDEO:
+      return <VideoBubble block={block} onTransitionEnd={onTransitionEnd} />
+    case BubbleBlockType.EMBED:
+      return <EmbedBubble block={block} onTransitionEnd={onTransitionEnd} />
+  }
+}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ImageBubbleStep } from 'models'
+import { ImageBubbleBlock } from 'models'
 import { TypingContent } from './TypingContent'
 import { parseVariables } from 'services/variable'

 type Props = {
-  step: ImageBubbleStep
+  block: ImageBubbleBlock
  onTransitionEnd: () => void
 }

@ -13,15 +13,15 @@ export const showAnimationDuration = 400

 export const mediaLoadingFallbackTimeout = 5000

-export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
+export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
  const { typebot } = useTypebot()
  const messageContainer = useRef<HTMLDivElement | null>(null)
  const image = useRef<HTMLImageElement | null>(null)
  const [isTyping, setIsTyping] = useState(true)

  const url = useMemo(
-    () => parseVariables(typebot.variables)(step.content?.url),
-    [step.content?.url, typebot.variables]
+    () => parseVariables(typebot.variables)(block.content?.url),
+    [block.content?.url, typebot.variables]
  )

  useEffect(() => {
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useTypebot } from 'contexts/TypebotContext'
-import { BubbleStepType, TextBubbleStep } from 'models'
+import { BubbleBlockType, TextBubbleBlock } from 'models'
 import { computeTypingTimeout } from 'services/chat'
 import { TypingContent } from './TypingContent'
 import { parseVariables } from 'services/variable'

 type Props = {
-  step: TextBubbleStep
+  block: TextBubbleBlock
  onTransitionEnd: () => void
 }

@ -18,18 +18,18 @@ const defaultTypingEmulation = {
  maxDelay: 1.5,
 }

-export const TextBubble = ({ step, onTransitionEnd }: Props) => {
+export const TextBubble = ({ block, onTransitionEnd }: Props) => {
  const { typebot } = useTypebot()
  const messageContainer = useRef<HTMLDivElement | null>(null)
  const [isTyping, setIsTyping] = useState(true)

  const [content] = useState(
-    parseVariables(typebot.variables)(step.content.html)
+    parseVariables(typebot.variables)(block.content.html)
  )

  useEffect(() => {
    const typingTimeout = computeTypingTimeout(
-      step.content.plainText,
+      block.content.plainText,
      typebot.settings?.typingEmulation ?? defaultTypingEmulation
    )
    setTimeout(() => {
@ -59,7 +59,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
          >
            {isTyping ? <TypingContent /> : <></>}
          </div>
-          {step.type === BubbleStepType.TEXT && (
+          {block.type === BubbleBlockType.TEXT && (
            <p
              style={{
                textOverflow: 'ellipsis',
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TypingContent.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TypingContent.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
@ -4,13 +4,13 @@ import {
  Variable,
  VideoBubbleContent,
  VideoBubbleContentType,
-  VideoBubbleStep,
+  VideoBubbleBlock,
 } from 'models'
 import { TypingContent } from './TypingContent'
 import { parseVariables } from 'services/variable'

 type Props = {
-  step: VideoBubbleStep
+  block: VideoBubbleBlock
  onTransitionEnd: () => void
 }

@ -18,7 +18,7 @@ export const showAnimationDuration = 400

 export const mediaLoadingFallbackTimeout = 5000

-export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
+export const VideoBubble = ({ block, onTransitionEnd }: Props) => {
  const { typebot } = useTypebot()
  const messageContainer = useRef<HTMLDivElement | null>(null)
  const [isTyping, setIsTyping] = useState(true)
@ -56,7 +56,7 @@ export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
            {isTyping ? <TypingContent /> : <></>}
          </div>
          <VideoContent
-            content={step.content}
+            content={block.content}
            isTyping={isTyping}
            variables={typebot.variables}
          />
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/index.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/index.tsx
@ -0,0 +1 @@
+export { InputChatBlock } from './InputChatBlock'
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/ChoiceForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/ChoiceForm.tsx
@ -1,21 +1,21 @@
 import { useAnswers } from 'contexts/AnswersContext'
-import { ChoiceInputStep } from 'models'
+import { ChoiceInputBlock } from 'models'
 import React, { useState } from 'react'
 import { SendButton } from './SendButton'

 type ChoiceFormProps = {
-  step: ChoiceInputStep
+  block: ChoiceInputBlock
  onSubmit: (value: string) => void
 }

-export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
+export const ChoiceForm = ({ block, onSubmit }: ChoiceFormProps) => {
  const { resultValues } = useAnswers()
  const [selectedIndices, setSelectedIndices] = useState<number[]>([])

  const handleClick = (itemIndex: number) => (e: React.MouseEvent) => {
    e.preventDefault()
-    if (step.options?.isMultipleChoice) toggleSelectedItemIndex(itemIndex)
-    else onSubmit(step.items[itemIndex].content ?? '')
+    if (block.options?.isMultipleChoice) toggleSelectedItemIndex(itemIndex)
+    else onSubmit(block.items[itemIndex].content ?? '')
  }

  const toggleSelectedItemIndex = (itemIndex: number) => {
@ -31,25 +31,27 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
  const handleSubmit = () =>
    onSubmit(
      selectedIndices
-        .map((itemIndex) => step.items[itemIndex].content)
+        .map((itemIndex) => block.items[itemIndex].content)
        .join(', ')
    )

  const isUniqueFirstButton =
-    resultValues && resultValues.answers.length === 0 && step.items.length === 1
+    resultValues &&
+    resultValues.answers.length === 0 &&
+    block.items.length === 1

  return (
    <form className="flex flex-col" onSubmit={handleSubmit}>
      <div className="flex flex-wrap">
-        {step.items.map((item, idx) => (
+        {block.items.map((item, idx) => (
          <span key={item.id} className="relative inline-flex mr-2 mb-2">
            <button
-              role={step.options?.isMultipleChoice ? 'checkbox' : 'button'}
+              role={block.options?.isMultipleChoice ? 'checkbox' : 'button'}
              onClick={handleClick(idx)}
              className={
                'py-2 px-4 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
                (selectedIndices.includes(idx) ||
-                !step.options?.isMultipleChoice
+                !block.options?.isMultipleChoice
                  ? ''
                  : 'selectable')
              }
@ -69,7 +71,10 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
      </div>
      <div className="flex">
        {selectedIndices.length > 0 && (
-          <SendButton label={step.options?.buttonLabel ?? 'Send'} disableIcon />
+          <SendButton
+            label={block.options?.buttonLabel ?? 'Send'}
+            disableIcon
+          />
        )}
      </div>
    </form>
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/DateForm.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/PaymentForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/PaymentForm.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/StripePaymentForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/StripePaymentForm.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/index.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/index.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/RatingForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/RatingForm.tsx
@ -1,14 +1,14 @@
-import { RatingInputOptions, RatingInputStep } from 'models'
+import { RatingInputOptions, RatingInputBlock } from 'models'
 import React, { FormEvent, useRef, useState } from 'react'
 import { isDefined, isEmpty, isNotDefined } from 'utils'
 import { SendButton } from './SendButton'

 type Props = {
-  step: RatingInputStep
+  block: RatingInputBlock
  onSubmit: (value: string) => void
 }

-export const RatingForm = ({ step, onSubmit }: Props) => {
+export const RatingForm = ({ block, onSubmit }: Props) => {
  const [rating, setRating] = useState<number>()
  const scaleElement = useRef<HTMLDivElement | null>(null)

@ -24,9 +24,9 @@ export const RatingForm = ({ step, onSubmit }: Props) => {
    <form className="flex flex-col" onSubmit={handleSubmit}>
      <div className="flex flex-col" ref={scaleElement}>
        <div className="flex">
-          {Array.from(Array(step.options.length)).map((_, idx) => (
+          {Array.from(Array(block.options.length)).map((_, idx) => (
            <RatingButton
-              {...step.options}
+              {...block.options}
              key={idx}
              rating={rating}
              idx={idx + 1}
@ -36,15 +36,15 @@ export const RatingForm = ({ step, onSubmit }: Props) => {
        </div>

        <div className="flex justify-between mr-2 mb-2">
-          {<span className="text-sm w-full ">{step.options.labels.left}</span>}
-          {!isEmpty(step.options.labels.middle) && (
+          {<span className="text-sm w-full ">{block.options.labels.left}</span>}
+          {!isEmpty(block.options.labels.middle) && (
            <span className="text-sm w-full text-center">
-              {step.options.labels.middle}
+              {block.options.labels.middle}
            </span>
          )}
          {
            <span className="text-sm w-full text-right">
-              {step.options.labels.right}
+              {block.options.labels.right}
            </span>
          }
        </div>
@ -53,7 +53,7 @@ export const RatingForm = ({ step, onSubmit }: Props) => {
      <div className="flex justify-end mr-2">
        {isDefined(rating) && (
          <SendButton
-            label={step.options?.labels.button ?? 'Send'}
+            label={block.options?.labels.button ?? 'Send'}
            disableIcon
          />
        )}
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/SendButton.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/SendButton.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/TextForm.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/TextForm.tsx
@ -1,39 +1,39 @@
 import {
-  EmailInputStep,
-  InputStepType,
-  NumberInputStep,
-  PhoneNumberInputStep,
-  TextInputStep,
-  UrlInputStep,
+  EmailInputBlock,
+  InputBlockType,
+  NumberInputBlock,
+  PhoneNumberInputBlock,
+  TextInputBlock,
+  UrlInputBlock,
 } from 'models'
 import React, { FormEvent, useState } from 'react'
 import { SendButton } from '../SendButton'
 import { TextInput } from './TextInputContent'

 type TextFormProps = {
-  step:
-    | TextInputStep
-    | EmailInputStep
-    | NumberInputStep
-    | UrlInputStep
-    | PhoneNumberInputStep
+  block:
+    | TextInputBlock
+    | EmailInputBlock
+    | NumberInputBlock
+    | UrlInputBlock
+    | PhoneNumberInputBlock
  onSubmit: (value: string) => void
  defaultValue?: string
  hasGuestAvatar: boolean
 }

 export const TextForm = ({
-  step,
+  block,
  onSubmit,
  defaultValue,
  hasGuestAvatar,
 }: TextFormProps) => {
  const [inputValue, setInputValue] = useState(defaultValue ?? '')

-  const isLongText = step.type === InputStepType.TEXT && step.options?.isLong
+  const isLongText = block.type === InputBlockType.TEXT && block.options?.isLong

  const handleChange = (inputValue: string) => {
-    if (step.type === InputStepType.URL && !inputValue.startsWith('https://'))
+    if (block.type === InputBlockType.URL && !inputValue.startsWith('https://'))
      return inputValue === 'https:/'
        ? undefined
        : setInputValue(`https://${inputValue}`)
@ -57,9 +57,9 @@ export const TextForm = ({
        maxWidth: isLongText ? undefined : '350px',
      }}
    >
-      <TextInput step={step} onChange={handleChange} value={inputValue} />
+      <TextInput block={block} onChange={handleChange} value={inputValue} />
      <SendButton
-        label={step.options?.labels?.button ?? 'Send'}
+        label={block.options?.labels?.button ?? 'Send'}
        isDisabled={inputValue === ''}
        className="my-2 ml-2"
      />
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/TextInputContent.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/TextInputContent.tsx
@ -1,10 +1,10 @@
 import {
-  TextInputStep,
-  EmailInputStep,
-  NumberInputStep,
-  InputStepType,
-  UrlInputStep,
-  PhoneNumberInputStep,
+  TextInputBlock,
+  EmailInputBlock,
+  NumberInputBlock,
+  InputBlockType,
+  UrlInputBlock,
+  PhoneNumberInputBlock,
 } from 'models'
 import React, {
  ChangeEvent,
@ -16,17 +16,17 @@ import React, {
 import PhoneInput, { Value, Country } from 'react-phone-number-input'

 type TextInputProps = {
-  step:
-    | TextInputStep
-    | EmailInputStep
-    | NumberInputStep
-    | UrlInputStep
-    | PhoneNumberInputStep
+  block:
+    | TextInputBlock
+    | EmailInputBlock
+    | NumberInputBlock
+    | UrlInputBlock
+    | PhoneNumberInputBlock
  value: string
  onChange: (value: string) => void
 }

-export const TextInput = ({ step, value, onChange }: TextInputProps) => {
+export const TextInput = ({ block, value, onChange }: TextInputProps) => {
  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null)

  useEffect(() => {
@ -42,14 +42,14 @@ export const TextInput = ({ step, value, onChange }: TextInputProps) => {
    onChange(value as string)
  }

-  switch (step.type) {
-    case InputStepType.TEXT: {
-      return step.options?.isLong ? (
+  switch (block.type) {
+    case InputBlockType.TEXT: {
+      return block.options?.isLong ? (
        <LongTextInput
          ref={inputRef as unknown as RefObject<HTMLTextAreaElement>}
          value={value}
          placeholder={
-            step.options?.labels?.placeholder ?? 'Type your answer...'
+            block.options?.labels?.placeholder ?? 'Type your answer...'
          }
          onChange={handleInputChange}
        />
@ -58,7 +58,7 @@ export const TextInput = ({ step, value, onChange }: TextInputProps) => {
          ref={inputRef}
          value={value}
          placeholder={
-            step.options?.labels?.placeholder ?? 'Type your answer...'
+            block.options?.labels?.placeholder ?? 'Type your answer...'
          }
          name="typebot-short-text"
          onChange={handleInputChange}
@ -66,13 +66,13 @@ export const TextInput = ({ step, value, onChange }: TextInputProps) => {
        />
      )
    }
-    case InputStepType.EMAIL: {
+    case InputBlockType.EMAIL: {
      return (
        <ShortTextInput
          ref={inputRef}
          value={value}
          placeholder={
-            step.options?.labels?.placeholder ?? 'Type your email...'
+            block.options?.labels?.placeholder ?? 'Type your email...'
          }
          onChange={handleInputChange}
          type="email"
@ -80,36 +80,36 @@ export const TextInput = ({ step, value, onChange }: TextInputProps) => {
        />
      )
    }
-    case InputStepType.NUMBER: {
+    case InputBlockType.NUMBER: {
      return (
        <ShortTextInput
          ref={inputRef}
          value={value}
          placeholder={
-            step.options?.labels?.placeholder ?? 'Type your answer...'
+            block.options?.labels?.placeholder ?? 'Type your answer...'
          }
          onChange={handleInputChange}
          type="number"
          style={{ appearance: 'auto' }}
-          min={step.options?.min}
-          max={step.options?.max}
-          step={step.options?.step ?? 'any'}
+          min={block.options?.min}
+          max={block.options?.max}
+          step={block.options?.step ?? 'any'}
        />
      )
    }
-    case InputStepType.URL: {
+    case InputBlockType.URL: {
      return (
        <ShortTextInput
          ref={inputRef}
          value={value}
-          placeholder={step.options?.labels?.placeholder ?? 'Type your URL...'}
+          placeholder={block.options?.labels?.placeholder ?? 'Type your URL...'}
          onChange={handleInputChange}
          type="url"
          autoComplete="url"
        />
      )
    }
-    case InputStepType.PHONE: {
+    case InputBlockType.PHONE: {
      return (
        <PhoneInput
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -117,9 +117,9 @@ export const TextInput = ({ step, value, onChange }: TextInputProps) => {
          value={value}
          onChange={handlePhoneNumberChange}
          placeholder={
-            step.options.labels.placeholder ?? 'Your phone number...'
+            block.options.labels.placeholder ?? 'Your phone number...'
          }
-          defaultCountry={step.options.defaultCountryCode as Country}
+          defaultCountry={block.options.defaultCountryCode as Country}
        />
      )
    }
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/index.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/TextForm/index.tsx
--- a/packages/bot-engine/src/components/ChatGroup/ChatGroup.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/ChatGroup.tsx
@ -3,37 +3,37 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import { AvatarSideContainer } from './AvatarSideContainer'
 import { LinkedTypebot, useTypebot } from '../../contexts/TypebotContext'
 import {
-  isBubbleStep,
-  isBubbleStepType,
+  isBubbleBlock,
+  isBubbleBlockType,
  isChoiceInput,
  isDefined,
-  isInputStep,
-  isIntegrationStep,
-  isLogicStep,
+  isInputBlock,
+  isIntegrationBlock,
+  isLogicBlock,
 } from 'utils'
 import { executeLogic } from 'services/logic'
 import { executeIntegration } from 'services/integration'
-import { parseRetryStep, stepCanBeRetried } from 'services/inputs'
+import { parseRetryBlock, blockCanBeRetried } from 'services/inputs'
 import { parseVariables } from '../../services/variable'
 import { useAnswers } from 'contexts/AnswersContext'
 import {
-  BubbleStep,
-  InputStep,
-  LogicStepType,
+  BubbleBlock,
+  InputBlock,
+  LogicBlockType,
  PublicTypebot,
-  Step,
+  Block,
 } from 'models'
-import { HostBubble } from './ChatStep/bubbles/HostBubble'
-import { InputChatStep } from './ChatStep/InputChatStep'
-import { getLastChatStepType } from '../../services/chat'
+import { HostBubble } from './ChatBlock/bubbles/HostBubble'
+import { getLastChatBlockType } from '../../services/chat'
 import { useChat } from 'contexts/ChatContext'
+import { InputChatBlock } from './ChatBlock'

-type ChatBlockProps = {
-  steps: Step[]
-  startStepIndex: number
-  blockTitle: string
+type ChatGroupProps = {
+  blocks: Block[]
+  startBlockIndex: number
+  groupTitle: string
  keepShowingHostAvatar: boolean
-  onBlockEnd: ({
+  onGroupEnd: ({
    edgeId,
    updatedTypebot,
  }: {
@ -42,15 +42,15 @@ type ChatBlockProps = {
  }) => void
 }

-type ChatDisplayChunk = { bubbles: BubbleStep[]; input?: InputStep }
+type ChatDisplayChunk = { bubbles: BubbleBlock[]; input?: InputBlock }

-export const ChatBlock = ({
-  steps,
-  startStepIndex,
-  blockTitle,
-  onBlockEnd,
+export const ChatGroup = ({
+  blocks,
+  startBlockIndex,
+  groupTitle,
+  onGroupEnd,
  keepShowingHostAvatar,
-}: ChatBlockProps) => {
+}: ChatGroupProps) => {
  const {
    currentTypebotId,
    typebot,
@ -66,55 +66,57 @@ export const ChatBlock = ({
  } = useTypebot()
  const { resultValues, updateVariables, resultId } = useAnswers()
  const { scroll } = useChat()
-  const [processedSteps, setProcessedSteps] = useState<Step[]>([])
+  const [processedBlocks, setProcessedBlocks] = useState<Block[]>([])
  const [displayedChunks, setDisplayedChunks] = useState<ChatDisplayChunk[]>([])

-  const insertStepInStack = (nextStep: Step) => {
-    setProcessedSteps([...processedSteps, nextStep])
-    if (isBubbleStep(nextStep)) {
-      const lastStepType = getLastChatStepType(processedSteps)
-      lastStepType && isBubbleStepType(lastStepType)
+  const insertBlockInStack = (nextBlock: Block) => {
+    setProcessedBlocks([...processedBlocks, nextBlock])
+    if (isBubbleBlock(nextBlock)) {
+      const lastBlockType = getLastChatBlockType(processedBlocks)
+      lastBlockType && isBubbleBlockType(lastBlockType)
        ? setDisplayedChunks(
            displayedChunks.map((c, idx) =>
              idx === displayedChunks.length - 1
-                ? { bubbles: [...c.bubbles, nextStep] }
+                ? { bubbles: [...c.bubbles, nextBlock] }
                : c
            )
          )
-        : setDisplayedChunks([...displayedChunks, { bubbles: [nextStep] }])
+        : setDisplayedChunks([...displayedChunks, { bubbles: [nextBlock] }])
    }
-    if (isInputStep(nextStep)) {
+    if (isInputBlock(nextBlock)) {
      displayedChunks.length === 0 ||
      isDefined(displayedChunks[displayedChunks.length - 1].input)
        ? setDisplayedChunks([
            ...displayedChunks,
-            { bubbles: [], input: nextStep },
+            { bubbles: [], input: nextBlock },
          ])
        : setDisplayedChunks(
            displayedChunks.map((c, idx) =>
-              idx === displayedChunks.length - 1 ? { ...c, input: nextStep } : c
+              idx === displayedChunks.length - 1
+                ? { ...c, input: nextBlock }
+                : c
            )
          )
    }
  }

  useEffect(() => {
-    const nextStep = steps[startStepIndex]
-    if (nextStep) insertStepInStack(nextStep)
+    const nextBlock = blocks[startBlockIndex]
+    if (nextBlock) insertBlockInStack(nextBlock)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    scroll()
-    onNewStepDisplayed()
+    onNewBlockDisplayed()
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [processedSteps])
+  }, [processedBlocks])

-  const onNewStepDisplayed = async () => {
-    const currentStep = [...processedSteps].pop()
-    if (!currentStep) return
-    if (isLogicStep(currentStep)) {
-      const { nextEdgeId, linkedTypebot } = await executeLogic(currentStep, {
+  const onNewBlockDisplayed = async () => {
+    const currentBlock = [...processedBlocks].pop()
+    if (!currentBlock) return
+    if (isLogicBlock(currentBlock)) {
+      const { nextEdgeId, linkedTypebot } = await executeLogic(currentBlock, {
        isPreview,
        apiHost,
        typebot,
@ -129,72 +131,75 @@ export const ChatBlock = ({
        currentTypebotId,
      })
      const isRedirecting =
-        currentStep.type === LogicStepType.REDIRECT &&
-        currentStep.options.isNewTab === false
+        currentBlock.type === LogicBlockType.REDIRECT &&
+        currentBlock.options.isNewTab === false
      if (isRedirecting) return
      nextEdgeId
-        ? onBlockEnd({ edgeId: nextEdgeId, updatedTypebot: linkedTypebot })
-        : displayNextStep()
+        ? onGroupEnd({ edgeId: nextEdgeId, updatedTypebot: linkedTypebot })
+        : displayNextBlock()
    }
-    if (isIntegrationStep(currentStep)) {
+    if (isIntegrationBlock(currentBlock)) {
      const nextEdgeId = await executeIntegration({
-        step: currentStep,
+        block: currentBlock,
        context: {
          apiHost,
          typebotId: currentTypebotId,
-          blockId: currentStep.blockId,
-          stepId: currentStep.id,
+          groupId: currentBlock.groupId,
+          blockId: currentBlock.id,
          variables: typebot.variables,
          isPreview,
          updateVariableValue,
          updateVariables,
          resultValues,
-          blocks: typebot.blocks,
+          groups: typebot.groups,
          onNewLog,
          resultId,
        },
      })
-      nextEdgeId ? onBlockEnd({ edgeId: nextEdgeId }) : displayNextStep()
+      nextEdgeId ? onGroupEnd({ edgeId: nextEdgeId }) : displayNextBlock()
    }
-    if (currentStep.type === 'start')
-      onBlockEnd({ edgeId: currentStep.outgoingEdgeId })
+    if (currentBlock.type === 'start')
+      onGroupEnd({ edgeId: currentBlock.outgoingEdgeId })
  }

-  const displayNextStep = (answerContent?: string, isRetry?: boolean) => {
+  const displayNextBlock = (answerContent?: string, isRetry?: boolean) => {
    scroll()
-    const currentStep = [...processedSteps].pop()
-    if (currentStep) {
-      if (isRetry && stepCanBeRetried(currentStep))
-        return insertStepInStack(
-          parseRetryStep(currentStep, typebot.variables, createEdge)
+    const currentBlock = [...processedBlocks].pop()
+    if (currentBlock) {
+      if (isRetry && blockCanBeRetried(currentBlock))
+        return insertBlockInStack(
+          parseRetryBlock(currentBlock, typebot.variables, createEdge)
        )
      if (
-        isInputStep(currentStep) &&
-        currentStep.options?.variableId &&
+        isInputBlock(currentBlock) &&
+        currentBlock.options?.variableId &&
        answerContent
      ) {
-        updateVariableValue(currentStep.options.variableId, answerContent)
+        updateVariableValue(currentBlock.options.variableId, answerContent)
      }
-      const isSingleChoiceStep =
-        isChoiceInput(currentStep) && !currentStep.options.isMultipleChoice
-      if (isSingleChoiceStep) {
-        const nextEdgeId = currentStep.items.find(
+      const isSingleChoiceBlock =
+        isChoiceInput(currentBlock) && !currentBlock.options.isMultipleChoice
+      if (isSingleChoiceBlock) {
+        const nextEdgeId = currentBlock.items.find(
          (i) => i.content === answerContent
        )?.outgoingEdgeId
-        if (nextEdgeId) return onBlockEnd({ edgeId: nextEdgeId })
+        if (nextEdgeId) return onGroupEnd({ edgeId: nextEdgeId })
      }

-      if (currentStep?.outgoingEdgeId || processedSteps.length === steps.length)
-        return onBlockEnd({ edgeId: currentStep.outgoingEdgeId })
+      if (
+        currentBlock?.outgoingEdgeId ||
+        processedBlocks.length === blocks.length
+      )
+        return onGroupEnd({ edgeId: currentBlock.outgoingEdgeId })
    }
-    const nextStep = steps[processedSteps.length + startStepIndex]
-    nextStep ? insertStepInStack(nextStep) : onBlockEnd({})
+    const nextBlock = blocks[processedBlocks.length + startBlockIndex]
+    nextBlock ? insertBlockInStack(nextBlock) : onGroupEnd({})
  }

  const avatarSrc = typebot.theme.chat.hostAvatar?.url

  return (
-    <div className="flex w-full" data-block-name={blockTitle}>
+    <div className="flex w-full" data-group-name={groupTitle}>
      <div className="flex flex-col w-full min-w-0">
        {displayedChunks.map((chunk, idx) => (
          <ChatChunks
@ -205,7 +210,7 @@ export const ChatBlock = ({
              src: avatarSrc && parseVariables(typebot.variables)(avatarSrc),
            }}
            hasGuestAvatar={typebot.theme.chat.guestAvatar?.isEnabled ?? false}
-            onDisplayNextStep={displayNextStep}
+            onDisplayNextBlock={displayNextBlock}
            keepShowingHostAvatar={keepShowingHostAvatar}
          />
        ))}
@ -219,14 +224,14 @@ type Props = {
  hostAvatar: { isEnabled: boolean; src?: string }
  hasGuestAvatar: boolean
  keepShowingHostAvatar: boolean
-  onDisplayNextStep: (answerContent?: string, isRetry?: boolean) => void
+  onDisplayNextBlock: (answerContent?: string, isRetry?: boolean) => void
 }
 const ChatChunks = ({
  displayChunk: { bubbles, input },
  hostAvatar,
  hasGuestAvatar,
  keepShowingHostAvatar,
-  onDisplayNextStep,
+  onDisplayNextBlock,
 }: Props) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const avatarSideContainerRef = useRef<any>()
@ -253,17 +258,17 @@ const ChatChunks = ({
          style={{ marginRight: hasGuestAvatar ? '50px' : '0.5rem' }}
        >
          <TransitionGroup>
-            {bubbles.map((step) => (
+            {bubbles.map((block) => (
              <CSSTransition
-                key={step.id}
+                key={block.id}
                classNames="bubble"
                timeout={500}
                unmountOnExit
              >
                <HostBubble
-                  step={step}
+                  block={block}
                  onTransitionEnd={() => {
-                    onDisplayNextStep()
+                    onDisplayNextBlock()
                    refreshTopOffset()
                  }}
                />
@ -279,9 +284,9 @@ const ChatChunks = ({
        in={isDefined(input)}
      >
        {input && (
-          <InputChatStep
-            step={input}
-            onTransitionEnd={onDisplayNextStep}
+          <InputChatBlock
+            block={input}
+            onTransitionEnd={onDisplayNextBlock}
            hasAvatar={hostAvatar.isEnabled}
            hasGuestAvatar={hasGuestAvatar}
          />
--- a/packages/bot-engine/src/components/ChatGroup/index.tsx
+++ b/packages/bot-engine/src/components/ChatGroup/index.tsx
@ -0,0 +1 @@
+export { ChatGroup } from './ChatGroup'
--- a/packages/bot-engine/src/components/ConversationContainer.tsx
+++ b/packages/bot-engine/src/components/ConversationContainer.tsx
@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react'

-import { ChatBlock } from './ChatBlock/ChatBlock'
+import { ChatGroup } from './ChatGroup'
 import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
-import { Block, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
+import { Group, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
 import { byId, isNotDefined } from 'utils'
 import { animateScroll as scroll } from 'react-scroll'
 import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
@ -13,15 +13,15 @@ import { ChatContext } from 'contexts/ChatContext'
 type Props = {
  theme: Theme
  predefinedVariables?: { [key: string]: string | undefined }
-  startBlockId?: string
-  onNewBlockVisible: (edge: Edge) => void
+  startGroupId?: string
+  onNewGroupVisible: (edge: Edge) => void
  onCompleted: () => void
 }
 export const ConversationContainer = ({
  theme,
  predefinedVariables,
-  startBlockId,
-  onNewBlockVisible,
+  startGroupId,
+  onNewGroupVisible,
  onCompleted,
 }: Props) => {
  const {
@ -31,34 +31,34 @@ export const ConversationContainer = ({
    popEdgeIdFromLinkedTypebotQueue,
  } = useTypebot()
  const { document: frameDocument } = useFrame()
-  const [displayedBlocks, setDisplayedBlocks] = useState<
-    { block: Block; startStepIndex: number }[]
+  const [displayedGroups, setDisplayedGroups] = useState<
+    { group: Group; startBlockIndex: number }[]
  >([])
  const { updateVariables } = useAnswers()
  const bottomAnchor = useRef<HTMLDivElement | null>(null)
  const scrollableContainer = useRef<HTMLDivElement | null>(null)

-  const displayNextBlock = ({
+  const displayNextGroup = ({
    edgeId,
    updatedTypebot,
-    blockId,
+    groupId,
  }: {
    edgeId?: string
-    blockId?: string
+    groupId?: string
    updatedTypebot?: PublicTypebot | LinkedTypebot
  }) => {
    const currentTypebot = updatedTypebot ?? typebot
-    if (blockId) {
-      const nextBlock = currentTypebot.blocks.find(byId(blockId))
-      if (!nextBlock) return
-      onNewBlockVisible({
+    if (groupId) {
+      const nextGroup = currentTypebot.groups.find(byId(groupId))
+      if (!nextGroup) return
+      onNewGroupVisible({
        id: 'edgeId',
-        from: { blockId: 'block', stepId: 'step' },
-        to: { blockId },
+        from: { groupId: 'block', blockId: 'block' },
+        to: { groupId },
      })
-      return setDisplayedBlocks([
-        ...displayedBlocks,
-        { block: nextBlock, startStepIndex: 0 },
+      return setDisplayedGroups([
+        ...displayedGroups,
+        { group: nextGroup, startBlockIndex: 0 },
      ])
    }
    const nextEdge = currentTypebot.edges.find(byId(edgeId))
@ -66,30 +66,30 @@ export const ConversationContainer = ({
      if (linkedBotQueue.length > 0) {
        const nextEdgeId = linkedBotQueue[0].edgeId
        popEdgeIdFromLinkedTypebotQueue()
-        displayNextBlock({ edgeId: nextEdgeId })
+        displayNextGroup({ edgeId: nextEdgeId })
      }
      return onCompleted()
    }
-    const nextBlock = currentTypebot.blocks.find(byId(nextEdge.to.blockId))
-    if (!nextBlock) return onCompleted()
-    const startStepIndex = nextEdge.to.stepId
-      ? nextBlock.steps.findIndex(byId(nextEdge.to.stepId))
+    const nextGroup = currentTypebot.groups.find(byId(nextEdge.to.groupId))
+    if (!nextGroup) return onCompleted()
+    const startBlockIndex = nextEdge.to.blockId
+      ? nextGroup.blocks.findIndex(byId(nextEdge.to.blockId))
      : 0
-    onNewBlockVisible(nextEdge)
-    setDisplayedBlocks([
-      ...displayedBlocks,
-      { block: nextBlock, startStepIndex },
+    onNewGroupVisible(nextEdge)
+    setDisplayedGroups([
+      ...displayedGroups,
+      { group: nextGroup, startBlockIndex },
    ])
  }

  useEffect(() => {
    const prefilledVariables = injectPredefinedVariables(predefinedVariables)
    updateVariables(prefilledVariables)
-    displayNextBlock({
-      edgeId: startBlockId
+    displayNextGroup({
+      edgeId: startGroupId
        ? undefined
-        : typebot.blocks[0].steps[0].outgoingEdgeId,
-      blockId: startBlockId,
+        : typebot.groups[0].blocks[0].outgoingEdgeId,
+      groupId: startGroupId,
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
@ -131,14 +131,14 @@ export const ConversationContainer = ({
      className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"
    >
      <ChatContext onScroll={autoScrollToBottom}>
-        {displayedBlocks.map((displayedBlock, idx) => (
-          <ChatBlock
-            key={displayedBlock.block.id + idx}
-            steps={displayedBlock.block.steps}
-            startStepIndex={displayedBlock.startStepIndex}
-            onBlockEnd={displayNextBlock}
-            blockTitle={displayedBlock.block.title}
-            keepShowingHostAvatar={idx === displayedBlocks.length - 1}
+        {displayedGroups.map((displayedGroup, idx) => (
+          <ChatGroup
+            key={displayedGroup.group.id + idx}
+            blocks={displayedGroup.group.blocks}
+            startBlockIndex={displayedGroup.startBlockIndex}
+            onGroupEnd={displayNextGroup}
+            groupTitle={displayedGroup.group.title}
+            keepShowingHostAvatar={idx === displayedGroups.length - 1}
          />
        ))}
      </ChatContext>
--- a/packages/bot-engine/src/components/TypebotViewer.tsx
+++ b/packages/bot-engine/src/components/TypebotViewer.tsx
@ -30,8 +30,8 @@ export type TypebotViewerProps = {
  style?: CSSProperties
  predefinedVariables?: { [key: string]: string | undefined }
  resultId?: string
-  startBlockId?: string
-  onNewBlockVisible?: (edge: Edge) => void
+  startGroupId?: string
+  onNewGroupVisible?: (edge: Edge) => void
  onNewAnswer?: (answer: Answer) => Promise<void>
  onNewLog?: (log: Omit<Log, 'id' | 'createdAt' | 'resultId'>) => void
  onCompleted?: () => void
@ -44,10 +44,10 @@ export const TypebotViewer = ({
  isPreview = false,
  style,
  resultId,
-  startBlockId,
+  startGroupId,
  predefinedVariables,
  onNewLog,
-  onNewBlockVisible,
+  onNewGroupVisible,
  onNewAnswer,
  onCompleted,
  onVariablesUpdated,
@ -59,8 +59,8 @@ export const TypebotViewer = ({
        : 'transparent',
    [typebot?.theme?.general?.background]
  )
-  const handleNewBlockVisible = (edge: Edge) =>
-    onNewBlockVisible && onNewBlockVisible(edge)
+  const handleNewGroupVisible = (edge: Edge) =>
+    onNewGroupVisible && onNewGroupVisible(edge)

  const handleNewAnswer = (answer: Answer) => onNewAnswer && onNewAnswer(answer)

@ -115,10 +115,10 @@ export const TypebotViewer = ({
            <div className="flex w-full h-full justify-center">
              <ConversationContainer
                theme={typebot.theme}
-                onNewBlockVisible={handleNewBlockVisible}
+                onNewGroupVisible={handleNewGroupVisible}
                onCompleted={handleCompleted}
                predefinedVariables={predefinedVariables}
-                startBlockId={startBlockId}
+                startGroupId={startGroupId}
              />
            </div>
            {typebot.settings.general.isBrandingEnabled && <LiteBadge />}
--- a/packages/bot-engine/src/contexts/TypebotContext.tsx
+++ b/packages/bot-engine/src/contexts/TypebotContext.tsx
@ -10,7 +10,7 @@ import React, {

 export type LinkedTypebot = Pick<
  PublicTypebot | Typebot,
-  'id' | 'blocks' | 'variables' | 'edges'
+  'id' | 'groups' | 'variables' | 'edges'
 >

 export type LinkedTypebotQueue = {
@ -86,14 +86,14 @@ export const TypebotContext = ({
  const injectLinkedTypebot = (typebot: Typebot | PublicTypebot) => {
    const typebotToInject = {
      id: 'typebotId' in typebot ? typebot.typebotId : typebot.id,
-      blocks: typebot.blocks,
+      groups: typebot.groups,
      edges: typebot.edges,
      variables: typebot.variables,
    }
    setLinkedTypebots((typebots) => [...typebots, typebotToInject])
    const updatedTypebot = {
      ...localTypebot,
-      blocks: [...localTypebot.blocks, ...typebotToInject.blocks],
+      groups: [...localTypebot.groups, ...typebotToInject.groups],
      variables: [...localTypebot.variables, ...typebotToInject.variables],
      edges: [...localTypebot.edges, ...typebotToInject.edges],
    }
--- a/packages/bot-engine/src/services/chat.ts
+++ b/packages/bot-engine/src/services/chat.ts
@ -1,12 +1,12 @@
 import {
-  BubbleStep,
-  BubbleStepType,
-  InputStep,
-  InputStepType,
-  Step,
+  BubbleBlock,
+  BubbleBlockType,
+  InputBlock,
+  InputBlockType,
+  Block,
  TypingEmulation,
 } from 'models'
-import { isBubbleStep, isInputStep } from 'utils'
+import { isBubbleBlock, isInputBlock } from 'utils'

 export const computeTypingTimeout = (
  bubbleContent: string,
@ -23,11 +23,11 @@ export const computeTypingTimeout = (
  return typingTimeout
 }

-export const getLastChatStepType = (
-  steps: Step[]
-): BubbleStepType | InputStepType | undefined => {
-  const displayedSteps = steps.filter(
-    (s) => isBubbleStep(s) || isInputStep(s)
-  ) as (BubbleStep | InputStep)[]
-  return displayedSteps.pop()?.type
+export const getLastChatBlockType = (
+  blocks: Block[]
+): BubbleBlockType | InputBlockType | undefined => {
+  const displayedBlocks = blocks.filter(
+    (s) => isBubbleBlock(s) || isInputBlock(s)
+  ) as (BubbleBlock | InputBlock)[]
+  return displayedBlocks.pop()?.type
 }
--- a/packages/bot-engine/src/services/inputs.ts
+++ b/packages/bot-engine/src/services/inputs.ts
@ -1,16 +1,16 @@
 import {
-  BubbleStep,
-  BubbleStepType,
+  BubbleBlock,
+  BubbleBlockType,
  Edge,
-  EmailInputStep,
-  InputStepType,
-  PhoneNumberInputStep,
-  Step,
-  UrlInputStep,
+  EmailInputBlock,
+  InputBlockType,
+  PhoneNumberInputBlock,
+  Block,
+  UrlInputBlock,
  Variable,
 } from 'models'
 import { isPossiblePhoneNumber } from 'react-phone-number-input'
-import { isInputStep } from 'utils'
+import { isInputBlock } from 'utils'
 import { parseVariables } from './variable'

 const emailRegex =
@ -20,41 +20,41 @@ const urlRegex =

 export const isInputValid = (
  inputValue: string,
-  type: InputStepType
+  type: InputBlockType
 ): boolean => {
  switch (type) {
-    case InputStepType.EMAIL:
+    case InputBlockType.EMAIL:
      return emailRegex.test(inputValue)
-    case InputStepType.PHONE:
+    case InputBlockType.PHONE:
      return isPossiblePhoneNumber(inputValue)
-    case InputStepType.URL:
+    case InputBlockType.URL:
      return urlRegex.test(inputValue)
  }
  return true
 }

-export const stepCanBeRetried = (
-  step: Step
-): step is EmailInputStep | UrlInputStep | PhoneNumberInputStep =>
-  isInputStep(step) && 'retryMessageContent' in step.options
+export const blockCanBeRetried = (
+  block: Block
+): block is EmailInputBlock | UrlInputBlock | PhoneNumberInputBlock =>
+  isInputBlock(block) && 'retryMessageContent' in block.options

-export const parseRetryStep = (
-  step: EmailInputStep | UrlInputStep | PhoneNumberInputStep,
+export const parseRetryBlock = (
+  block: EmailInputBlock | UrlInputBlock | PhoneNumberInputBlock,
  variables: Variable[],
  createEdge: (edge: Edge) => void
-): BubbleStep => {
-  const content = parseVariables(variables)(step.options.retryMessageContent)
-  const newStepId = step.id + Math.random() * 1000
+): BubbleBlock => {
+  const content = parseVariables(variables)(block.options.retryMessageContent)
+  const newBlockId = block.id + Math.random() * 1000
  const newEdge: Edge = {
    id: (Math.random() * 1000).toString(),
-    from: { stepId: newStepId, blockId: step.blockId },
-    to: { blockId: step.blockId, stepId: step.id },
+    from: { blockId: newBlockId, groupId: block.groupId },
+    to: { groupId: block.groupId, blockId: block.id },
  }
  createEdge(newEdge)
  return {
-    blockId: step.blockId,
-    id: newStepId,
-    type: BubbleStepType.TEXT,
+    groupId: block.groupId,
+    id: newBlockId,
+    type: BubbleBlockType.TEXT,
    content: {
      html: `<div>${content}</div>`,
      richText: [],
--- a/packages/bot-engine/src/services/integration.ts
+++ b/packages/bot-engine/src/services/integration.ts
@ -1,23 +1,23 @@
 import { Log } from 'db'
 import {
-  IntegrationStep,
-  IntegrationStepType,
-  GoogleSheetsStep,
+  IntegrationBlock,
+  IntegrationBlockType,
+  GoogleSheetsBlock,
  GoogleSheetsAction,
  GoogleSheetsInsertRowOptions,
  Variable,
  GoogleSheetsUpdateRowOptions,
  Cell,
  GoogleSheetsGetOptions,
-  GoogleAnalyticsStep,
-  WebhookStep,
-  SendEmailStep,
-  ZapierStep,
+  GoogleAnalyticsBlock,
+  WebhookBlock,
+  SendEmailBlock,
+  ZapierBlock,
  ResultValues,
-  Block,
+  Group,
  VariableWithValue,
-  MakeComStep,
-  PabblyConnectStep,
+  MakeComBlock,
+  PabblyConnectBlock,
 } from 'models'
 import { stringify } from 'qs'
 import { byId, sendRequest } from 'utils'
@ -27,12 +27,12 @@ import { parseVariables, parseVariablesInObject } from './variable'
 type IntegrationContext = {
  apiHost: string
  typebotId: string
+  groupId: string
  blockId: string
-  stepId: string
  isPreview: boolean
  variables: Variable[]
  resultValues: ResultValues
-  blocks: Block[]
+  groups: Group[]
  resultId?: string
  updateVariables: (variables: VariableWithValue[]) => void
  updateVariableValue: (variableId: string, value: string) => void
@ -40,55 +40,55 @@ type IntegrationContext = {
 }

 export const executeIntegration = ({
-  step,
+  block,
  context,
 }: {
-  step: IntegrationStep
+  block: IntegrationBlock
  context: IntegrationContext
 }): Promise<string | undefined> => {
-  switch (step.type) {
-    case IntegrationStepType.GOOGLE_SHEETS:
-      return executeGoogleSheetIntegration(step, context)
-    case IntegrationStepType.GOOGLE_ANALYTICS:
-      return executeGoogleAnalyticsIntegration(step, context)
-    case IntegrationStepType.ZAPIER:
-    case IntegrationStepType.MAKE_COM:
-    case IntegrationStepType.PABBLY_CONNECT:
-    case IntegrationStepType.WEBHOOK:
-      return executeWebhook(step, context)
-    case IntegrationStepType.EMAIL:
-      return sendEmail(step, context)
+  switch (block.type) {
+    case IntegrationBlockType.GOOGLE_SHEETS:
+      return executeGoogleSheetIntegration(block, context)
+    case IntegrationBlockType.GOOGLE_ANALYTICS:
+      return executeGoogleAnalyticsIntegration(block, context)
+    case IntegrationBlockType.ZAPIER:
+    case IntegrationBlockType.MAKE_COM:
+    case IntegrationBlockType.PABBLY_CONNECT:
+    case IntegrationBlockType.WEBHOOK:
+      return executeWebhook(block, context)
+    case IntegrationBlockType.EMAIL:
+      return sendEmail(block, context)
  }
 }

 export const executeGoogleAnalyticsIntegration = async (
-  step: GoogleAnalyticsStep,
+  block: GoogleAnalyticsBlock,
  { variables }: IntegrationContext
 ) => {
-  if (!step.options?.trackingId) return step.outgoingEdgeId
+  if (!block.options?.trackingId) return block.outgoingEdgeId
  const { default: initGoogleAnalytics } = await import('../../lib/gtag')
-  await initGoogleAnalytics(step.options.trackingId)
-  sendGaEvent(parseVariablesInObject(step.options, variables))
-  return step.outgoingEdgeId
+  await initGoogleAnalytics(block.options.trackingId)
+  sendGaEvent(parseVariablesInObject(block.options, variables))
+  return block.outgoingEdgeId
 }

 const executeGoogleSheetIntegration = async (
-  step: GoogleSheetsStep,
+  block: GoogleSheetsBlock,
  context: IntegrationContext
 ) => {
-  if (!('action' in step.options)) return step.outgoingEdgeId
-  switch (step.options.action) {
+  if (!('action' in block.options)) return block.outgoingEdgeId
+  switch (block.options.action) {
    case GoogleSheetsAction.INSERT_ROW:
-      await insertRowInGoogleSheets(step.options, context)
+      await insertRowInGoogleSheets(block.options, context)
      break
    case GoogleSheetsAction.UPDATE_ROW:
-      await updateRowInGoogleSheets(step.options, context)
+      await updateRowInGoogleSheets(block.options, context)
      break
    case GoogleSheetsAction.GET:
-      await getRowFromGoogleSheets(step.options, context)
+      await getRowFromGoogleSheets(block.options, context)
      break
  }
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const insertRowInGoogleSheets = async (
@ -216,10 +216,9 @@ const parseCellValues = (
  }, {})

 const executeWebhook = async (
-  step: WebhookStep | ZapierStep | MakeComStep | PabblyConnectStep,
+  block: WebhookBlock | ZapierBlock | MakeComBlock | PabblyConnectBlock,
  {
    blockId,
-    stepId,
    variables,
    updateVariableValue,
    updateVariables,
@ -232,7 +231,7 @@ const executeWebhook = async (
 ) => {
  const params = stringify({ resultId })
  const { data, error } = await sendRequest({
-    url: `${apiHost}/api/typebots/${typebotId}/blocks/${blockId}/steps/${stepId}/executeWebhook?${params}`,
+    url: `${apiHost}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook?${params}`,
    method: 'POST',
    body: {
      variables,
@ -252,7 +251,7 @@ const executeWebhook = async (
      : 'Webhook successfuly executed',
    details: JSON.stringify(error ?? data, null, 2).substring(0, 1000),
  })
-  const newVariables = step.options.responseVariableMapping.reduce<
+  const newVariables = block.options.responseVariableMapping.reduce<
    VariableWithValue[]
  >((newVariables, varMapping) => {
    if (!varMapping?.bodyPath || !varMapping.variableId) return newVariables
@ -271,11 +270,11 @@ const executeWebhook = async (
    }
  }, [])
  updateVariables(newVariables)
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const sendEmail = async (
-  step: SendEmailStep,
+  block: SendEmailBlock,
  { variables, apiHost, isPreview, onNewLog, resultId }: IntegrationContext
 ) => {
  if (isPreview) {
@ -284,9 +283,9 @@ const sendEmail = async (
      description: 'Emails are not sent in preview mode',
      details: null,
    })
-    return step.outgoingEdgeId
+    return block.outgoingEdgeId
  }
-  const { options } = step
+  const { options } = block
  const replyTo = parseVariables(variables)(options.replyTo)
  const { error } = await sendRequest({
    url: `${apiHost}/api/integrations/email?resultId=${resultId}`,
@ -304,7 +303,7 @@ const sendEmail = async (
  onNewLog(
    parseLog(error, 'Succesfully sent an email', 'Failed to send an email')
  )
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const parseLog = (
--- a/packages/bot-engine/src/services/logic.ts
+++ b/packages/bot-engine/src/services/logic.ts
@ -1,17 +1,17 @@
 import { LinkedTypebot } from 'contexts/TypebotContext'
 import { Log } from 'db'
 import {
-  LogicStep,
-  LogicStepType,
+  LogicBlock,
+  LogicBlockType,
  LogicalOperator,
-  ConditionStep,
+  ConditionBlock,
  Variable,
  ComparisonOperators,
-  SetVariableStep,
-  RedirectStep,
+  SetVariableBlock,
+  RedirectBlock,
  Comparison,
-  CodeStep,
-  TypebotLinkStep,
+  CodeBlock,
+  TypebotLinkBlock,
  PublicTypebot,
  Typebot,
  Edge,
@ -42,51 +42,53 @@ type LogicContext = {
 }

 export const executeLogic = async (
-  step: LogicStep,
+  block: LogicBlock,
  context: LogicContext
 ): Promise<{
  nextEdgeId?: EdgeId
  linkedTypebot?: PublicTypebot | LinkedTypebot
 }> => {
-  switch (step.type) {
-    case LogicStepType.SET_VARIABLE:
-      return { nextEdgeId: executeSetVariable(step, context) }
-    case LogicStepType.CONDITION:
-      return { nextEdgeId: executeCondition(step, context) }
-    case LogicStepType.REDIRECT:
-      return { nextEdgeId: executeRedirect(step, context) }
-    case LogicStepType.CODE:
-      return { nextEdgeId: await executeCode(step, context) }
-    case LogicStepType.TYPEBOT_LINK:
-      return await executeTypebotLink(step, context)
+  switch (block.type) {
+    case LogicBlockType.SET_VARIABLE:
+      return { nextEdgeId: executeSetVariable(block, context) }
+    case LogicBlockType.CONDITION:
+      return { nextEdgeId: executeCondition(block, context) }
+    case LogicBlockType.REDIRECT:
+      return { nextEdgeId: executeRedirect(block, context) }
+    case LogicBlockType.CODE:
+      return { nextEdgeId: await executeCode(block, context) }
+    case LogicBlockType.TYPEBOT_LINK:
+      return await executeTypebotLink(block, context)
  }
 }

 const executeSetVariable = (
-  step: SetVariableStep,
+  block: SetVariableBlock,
  { typebot: { variables }, updateVariableValue, updateVariables }: LogicContext
 ): EdgeId | undefined => {
-  if (!step.options?.variableId) return step.outgoingEdgeId
-  const evaluatedExpression = step.options.expressionToEvaluate
-    ? evaluateExpression(variables)(step.options.expressionToEvaluate)
+  if (!block.options?.variableId) return block.outgoingEdgeId
+  const evaluatedExpression = block.options.expressionToEvaluate
+    ? evaluateExpression(variables)(block.options.expressionToEvaluate)
    : undefined
-  const existingVariable = variables.find(byId(step.options.variableId))
-  if (!existingVariable) return step.outgoingEdgeId
+  const existingVariable = variables.find(byId(block.options.variableId))
+  if (!existingVariable) return block.outgoingEdgeId
  updateVariableValue(existingVariable.id, evaluatedExpression)
  updateVariables([{ ...existingVariable, value: evaluatedExpression }])
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const executeCondition = (
-  step: ConditionStep,
+  block: ConditionBlock,
  { typebot: { variables } }: LogicContext
 ): EdgeId | undefined => {
-  const { content } = step.items[0]
+  const { content } = block.items[0]
  const isConditionPassed =
    content.logicalOperator === LogicalOperator.AND
      ? content.comparisons.every(executeComparison(variables))
      : content.comparisons.some(executeComparison(variables))
-  return isConditionPassed ? step.items[0].outgoingEdgeId : step.outgoingEdgeId
+  return isConditionPassed
+    ? block.items[0].outgoingEdgeId
+    : block.outgoingEdgeId
 }

 const executeComparison =
@ -122,14 +124,14 @@ const executeComparison =
  }

 const executeRedirect = (
-  step: RedirectStep,
+  block: RedirectBlock,
  { typebot: { variables } }: LogicContext
 ): EdgeId | undefined => {
-  if (!step.options?.url) return step.outgoingEdgeId
-  const formattedUrl = sanitizeUrl(parseVariables(variables)(step.options.url))
+  if (!block.options?.url) return block.outgoingEdgeId
+  const formattedUrl = sanitizeUrl(parseVariables(variables)(block.options.url))
  const isEmbedded = window.parent && window.location !== window.top?.location
  if (isEmbedded) {
-    if (!step.options.isNewTab)
+    if (!block.options.isNewTab)
      return ((window.top as Window).location.href = formattedUrl)

    try {
@ -145,30 +147,30 @@ const executeRedirect = (
      )
    }
  } else {
-    window.open(formattedUrl, step.options.isNewTab ? '_blank' : '_self')
+    window.open(formattedUrl, block.options.isNewTab ? '_blank' : '_self')
  }
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const executeCode = async (
-  step: CodeStep,
+  block: CodeBlock,
  { typebot: { variables } }: LogicContext
 ) => {
-  if (!step.options.content) return
+  if (!block.options.content) return
  const func = Function(
    ...variables.map((v) => v.id),
-    parseVariables(variables, { fieldToParse: 'id' })(step.options.content)
+    parseVariables(variables, { fieldToParse: 'id' })(block.options.content)
  )
  try {
    await func(...variables.map((v) => v.value))
  } catch (err) {
    console.error(err)
  }
-  return step.outgoingEdgeId
+  return block.outgoingEdgeId
 }

 const executeTypebotLink = async (
-  step: TypebotLinkStep,
+  block: TypebotLinkBlock,
  context: LogicContext
 ): Promise<{
  nextEdgeId?: EdgeId
@ -184,10 +186,10 @@ const executeTypebotLink = async (
    currentTypebotId,
  } = context
  const linkedTypebot = (
-    step.options.typebotId === 'current'
+    block.options.typebotId === 'current'
      ? typebot
-      : [typebot, ...linkedTypebots].find(byId(step.options.typebotId)) ??
-        (await fetchAndInjectTypebot(step, context))
+      : [typebot, ...linkedTypebots].find(byId(block.options.typebotId)) ??
+        (await fetchAndInjectTypebot(block, context))
  ) as PublicTypebot | LinkedTypebot | undefined
  if (!linkedTypebot) {
    onNewLog({
@ -195,26 +197,26 @@ const executeTypebotLink = async (
      description: 'Failed to link typebot',
      details: '',
    })
-    return { nextEdgeId: step.outgoingEdgeId }
+    return { nextEdgeId: block.outgoingEdgeId }
  }
-  if (step.outgoingEdgeId)
+  if (block.outgoingEdgeId)
    pushEdgeIdInLinkedTypebotQueue({
-      edgeId: step.outgoingEdgeId,
+      edgeId: block.outgoingEdgeId,
      typebotId: currentTypebotId,
    })
  setCurrentTypebotId(
    'typebotId' in linkedTypebot ? linkedTypebot.typebotId : linkedTypebot.id
  )
-  const nextBlockId =
-    step.options.blockId ??
-    linkedTypebot.blocks.find((b) => b.steps.some((s) => s.type === 'start'))
+  const nextGroupId =
+    block.options.groupId ??
+    linkedTypebot.groups.find((b) => b.blocks.some((s) => s.type === 'start'))
      ?.id
-  if (!nextBlockId) return { nextEdgeId: step.outgoingEdgeId }
+  if (!nextGroupId) return { nextEdgeId: block.outgoingEdgeId }
  const newEdge: Edge = {
    id: (Math.random() * 1000).toString(),
-    from: { stepId: '', blockId: '' },
+    from: { blockId: '', groupId: '' },
    to: {
-      blockId: nextBlockId,
+      groupId: nextGroupId,
    },
  }
  createEdge(newEdge)
@ -228,15 +230,15 @@ const executeTypebotLink = async (
 }

 const fetchAndInjectTypebot = async (
-  step: TypebotLinkStep,
+  block: TypebotLinkBlock,
  { apiHost, injectLinkedTypebot, isPreview }: LogicContext
 ): Promise<LinkedTypebot | undefined> => {
  const { data, error } = isPreview
    ? await sendRequest<{ typebot: Typebot }>(
-        `/api/typebots/${step.options.typebotId}`
+        `/api/typebots/${block.options.typebotId}`
      )
    : await sendRequest<{ typebot: PublicTypebot }>(
-        `${apiHost}/api/publicTypebots/${step.options.typebotId}`
+        `${apiHost}/api/publicTypebots/${block.options.typebotId}`
      )
  if (!data || error) return
  return injectLinkedTypebot(data.typebot)
				`@ -1 +0,0 @@`
				`export { InputChatStep } from './InputChatStep'`
				`@ -0,0 +1 @@`
				`export { InputChatBlock } from './InputChatBlock'`