feat(engine): 🚸 Improve input variable behaviour (for loops)

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

@@ -26,7 +26,9 @@ export const InputChatStep = ({
 
   const { variableId } = step.options
   const defaultValue =
-    variableId && typebot.variables.find(byId(variableId))?.value
+    typebot.settings.general.isInputPrefillEnabled ?? true
+      ? variableId && typebot.variables.find(byId(variableId))?.value
+      : undefined
 
   const handleSubmit = (content: string) => {
     setAnswer(content)

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

@@ -1,5 +1,5 @@
 import { Avatar } from 'components/avatars/Avatar'
-import React from 'react'
+import React, { useState } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
 interface Props {
@@ -15,6 +15,8 @@ export const GuestBubble = ({
   avatarSrc,
   onClick,
 }: Props): JSX.Element => {
+  const [content] = useState(message)
+
   return (
     <CSSTransition classNames="bubble" timeout={1000}>
       <div className="flex justify-end mb-2 items-end" onClick={onClick}>
@@ -22,7 +24,7 @@ export const GuestBubble = ({
           className="px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble cursor-pointer hover:brightness-90 active:brightness-75"
           data-testid="guest-bubble"
         >
-          {message}
+          {content}
         </span>
         {showAvatar && <Avatar avatarSrc={avatarSrc} />}
       </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTypebot } from 'contexts/TypebotContext'
 import { BubbleStepType, TextBubbleStep } from 'models'
 import { computeTypingTimeout } from 'services/chat'
@@ -23,10 +23,8 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const messageContainer = useRef<HTMLDivElement | null>(null)
   const [isTyping, setIsTyping] = useState(true)
 
-  const content = useMemo(
-    () => parseVariables(typebot.variables)(step.content.html),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [typebot.variables]
+  const [content] = useState(
+    parseVariables(typebot.variables)(step.content.html)
   )
 
   useEffect(() => {

packages/models/src/typebot/settings.ts

@@ -7,6 +7,7 @@ export type Settings = {
 export type GeneralSettings = {
   isBrandingEnabled: boolean
   isNewResultOnRefreshEnabled?: boolean
+  isInputPrefillEnabled?: boolean
 }
 
 export type TypingEmulation = {
@@ -23,7 +24,11 @@ export type Metadata = {
 }
 
 export const defaultSettings: Settings = {
-  general: { isBrandingEnabled: true, isNewResultOnRefreshEnabled: false },
+  general: {
+    isBrandingEnabled: true,
+    isNewResultOnRefreshEnabled: false,
+    isInputPrefillEnabled: true,
+  },
   typingEmulation: { enabled: true, speed: 300, maxDelay: 1.5 },
   metadata: {
     description: