♻️ Introduce typebot v6 with events (#1013)

Closes #885

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx

@@ -7,6 +7,7 @@ import { Stack } from '@chakra-ui/react'
 import { isDefined, isNotEmpty } from '@typebot.io/lib'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
 import React, { useState } from 'react'
+import { defaultImageBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/image/constants'
 
 type Props = {
   uploadFileProps: FilePathUploadProps
@@ -21,7 +22,7 @@ export const ImageBubbleSettings = ({
 }: Props) => {
   const { t } = useTranslate()
   const [showClickLinkInput, setShowClickLinkInput] = useState(
-    isNotEmpty(block.content.clickLink?.url)
+    isNotEmpty(block.content?.clickLink?.url)
   )
 
   const updateImage = (url: string) => {
@@ -31,19 +32,19 @@ export const ImageBubbleSettings = ({
   const updateClickLinkUrl = (url: string) => {
     onContentChange({
       ...block.content,
-      clickLink: { ...block.content.clickLink, url },
+      clickLink: { ...block.content?.clickLink, url },
     })
   }
 
   const updateClickLinkAltText = (alt: string) => {
     onContentChange({
       ...block.content,
-      clickLink: { ...block.content.clickLink, alt },
+      clickLink: { ...block.content?.clickLink, alt },
     })
   }
 
   const toggleClickLink = () => {
-    if (isDefined(block.content.clickLink) && showClickLinkInput) {
+    if (isDefined(block.content?.clickLink) && showClickLinkInput) {
       onContentChange({ ...block.content, clickLink: undefined })
     }
     setShowClickLinkInput(!showClickLinkInput)
@@ -55,6 +56,7 @@ export const ImageBubbleSettings = ({
         uploadFileProps={uploadFileProps}
         defaultUrl={block.content?.url}
         onSubmit={updateImage}
+        excludedTabs={['emoji']}
       />
       <Stack>
         <SwitchWithLabel
@@ -68,14 +70,17 @@ export const ImageBubbleSettings = ({
               autoFocus
               placeholder="https://example.com"
               onChange={updateClickLinkUrl}
-              defaultValue={block.content.clickLink?.url}
+              defaultValue={block.content?.clickLink?.url}
             />
             <TextInput
               placeholder={t(
                 'editor.blocks.bubbles.image.switchWithLabel.onClick.placeholder'
               )}
               onChange={updateClickLinkAltText}
-              defaultValue={block.content.clickLink?.alt}
+              defaultValue={
+                block.content?.clickLink?.alt ??
+                defaultImageBubbleContent.clickLink.alt
+              }
             />
           </>
         )}

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
 import { createTypebots } from '@typebot.io/lib/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseHelpers'
-import { BubbleBlockType, defaultImageBubbleContent } from '@typebot.io/schemas'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
 import { proWorkspaceId } from '@typebot.io/lib/playwright/databaseSetup'
+import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@@ -18,7 +18,6 @@ test.describe.parallel('Image bubble block', () => {
           id: typebotId,
           ...parseDefaultGroupWithBlock({
             type: BubbleBlockType.IMAGE,
-            content: defaultImageBubbleContent,
           }),
         },
       ])
@@ -44,7 +43,6 @@ test.describe.parallel('Image bubble block', () => {
           id: typebotId,
           ...parseDefaultGroupWithBlock({
             type: BubbleBlockType.IMAGE,
-            content: defaultImageBubbleContent,
           }),
         },
       ])
@@ -66,7 +64,6 @@ test.describe.parallel('Image bubble block', () => {
           id: typebotId,
           ...parseDefaultGroupWithBlock({
             type: BubbleBlockType.IMAGE,
-            content: defaultImageBubbleContent,
           }),
         },
       ])