refactor(♻️ Add defaults everywhere (+ settings page)):

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTypebot } from '../../contexts/TypebotContext'
 import { HostAvatar } from '../avatars/HostAvatar'
 import { useFrame } from 'react-frame-component'
@@ -22,6 +22,7 @@ export const AvatarSideContainer = () => {
     return () => {
       resizeObserver.disconnect()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

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

@@ -35,11 +35,13 @@ export const ChatBlock = ({
     const nextStep =
       typebot.steps.byId[startStepId ?? stepIds[displayedSteps.length]]
     if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
     autoScrollToBottom()
     onNewStepDisplayed()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displayedSteps])
 
   const onNewStepDisplayed = async () => {

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

@@ -42,6 +42,7 @@ const InputChatStep = ({
 
   useEffect(() => {
     addNewAvatarOffset()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleSubmit = (value: string) => {

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

@@ -24,11 +24,12 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
   const url = useMemo(
     () =>
       parseVariables({ text: step.content?.url, variables: typebot.variables }),
-    [typebot.variables]
+    [step.content?.url, typebot.variables]
   )
 
   useEffect(() => {
     showContentAfterMediaLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const showContentAfterMediaLoad = () => {
@@ -83,6 +84,7 @@ export const ImageBubble = ({ step, onTransitionEnd }: Props) => {
               height: isTyping ? '2rem' : 'auto',
               maxWidth: '100%',
             }}
+            alt="Bubble image"
           />
         </div>
       </div>

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

@@ -28,6 +28,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const content = useMemo(
     () =>
       parseVariables({ text: step.content.html, variables: typebot.variables }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [typebot.variables]
   )
 
@@ -40,6 +41,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
     setTimeout(() => {
       onTypingEnd()
     }, typingTimeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const onTypingEnd = () => {

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

@@ -28,6 +28,7 @@ export const VideoBubble = ({ step, onTransitionEnd }: Props) => {
 
   useEffect(() => {
     showContentAfterMediaLoad()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const showContentAfterMediaLoad = () => {
@@ -86,6 +87,7 @@ const VideoContent = ({
 }) => {
   const url = useMemo(
     () => parseVariables({ text: content?.url, variables: variables }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [variables]
   )
   if (!content?.type) return <></>

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

@@ -13,6 +13,7 @@ export const ChoiceForm = ({ options, onSubmit }: ChoiceFormProps) => {
   const { typebot } = useTypebot()
   const items = useMemo(
     () => filterTable(options?.itemIds ?? [], typebot.choiceItems),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
   const [selectedIds, setSelectedIds] = useState<string[]>([])
@@ -41,6 +42,7 @@ export const ChoiceForm = ({ options, onSubmit }: ChoiceFormProps) => {
       <div className="flex flex-wrap">
         {options?.itemIds.map((itemId) => (
           <button
+            key={itemId}
             role={options?.isMultipleChoice ? 'checkbox' : 'button'}
             onClick={handleClick(itemId)}
             className={

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

@@ -26,7 +26,7 @@ type TextInputProps = {
 }
 
 export const TextInput = ({ step, onChange }: TextInputProps) => {
-  const inputRef = useRef<any>(null)
+  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null)
 
   useEffect(() => {
     if (!inputRef.current) return
@@ -102,7 +102,8 @@ export const TextInput = ({ step, onChange }: TextInputProps) => {
     case InputStepType.PHONE: {
       return (
         <PhoneInput
-          ref={inputRef}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={inputRef as any}
           onChange={handlePhoneNumberChange}
           placeholder={
             step.options?.labels?.placeholder ?? 'Your phone number...'