✨ Introduce bot v2 in builder (#328)

Also, the new engine is the default for updated typebots for viewer Closes #211
2023-02-21 15:25:14 +01:00
parent 527dc8a5b1
commit debdac12ff
208 changed files with 4462 additions and 5236 deletions
--- a/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
@@ -4,7 +4,6 @@ import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { BubbleBlockType, defaultAudioBubbleContent } from 'models'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
-import { typebotViewer } from 'utils/playwright/testHelpers'

 const audioSampleUrl =
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
@@ -34,7 +33,7 @@ test('should work as expected', async ({ page }) => {
    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
  )
  await page.getByRole('button', { name: 'Preview', exact: true }).click()
-  await expect(typebotViewer(page).locator('audio')).toHaveAttribute(
+  await expect(page.locator('audio')).toHaveAttribute(
    'src',
    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
  )
--- a/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
@@ -3,7 +3,6 @@ import { BubbleBlockType, defaultEmbedBubbleContent } from 'models'
 import { createId } from '@paralleldrive/cuid2'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
-import { typebotViewer } from 'utils/playwright/testHelpers'

 const pdfSrc = 'https://www.orimi.com/pdf-test.pdf'
 const siteSrc = 'https://app.cal.com/baptistearno/15min'
@@ -47,9 +46,10 @@ test.describe.parallel('Embed bubble block', () => {

      await page.goto(`/typebots/${typebotId}/edit`)
      await page.click('text=Preview')
-      await expect(
-        typebotViewer(page).locator('iframe#embed-bubble-content')
-      ).toHaveAttribute('src', siteSrc)
+      await expect(page.locator('iframe#embed-bubble-content')).toHaveAttribute(
+        'src',
+        siteSrc
+      )
    })
  })
 })
--- a/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
@@ -3,7 +3,6 @@ import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { BubbleBlockType, defaultImageBubbleContent } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { getTestAsset } from '@/test/utils/playwright'

 const unsplashImageSrc =
@@ -117,10 +116,7 @@ test.describe.parallel('Image bubble block', () => {

      await page.goto(`/typebots/${typebotId}/edit`)
      await page.click('text=Preview')
-      await expect(typebotViewer(page).locator('img')).toHaveAttribute(
-        'src',
-        unsplashImageSrc
-      )
+      await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
    })
  })
 })
--- a/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
@@ -3,7 +3,6 @@ import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { BubbleBlockType, defaultTextBubbleContent } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'

 test.describe('Text bubble block', () => {
  test('rich text features should work', async ({ page }) => {
@@ -51,17 +50,17 @@ test.describe('Text bubble block', () => {
    await page.getByRole('menuitem', { name: 'Create test' }).click()

    await page.click('text=Preview')
+    await expect(page.locator('span.slate-bold >> nth=0')).toHaveText(
+      'Bold text'
+    )
+    await expect(page.locator('span.slate-italic >> nth=0')).toHaveText(
+      'Italic text'
+    )
+    await expect(page.locator('span.slate-underline >> nth=0')).toHaveText(
+      'Underlined text'
+    )
    await expect(
-      typebotViewer(page).locator('span.slate-bold >> nth=0')
-    ).toHaveText('Bold text')
-    await expect(
-      typebotViewer(page).locator('span.slate-italic >> nth=0')
-    ).toHaveText('Italic text')
-    await expect(
-      typebotViewer(page).locator('span.slate-underline >> nth=0')
-    ).toHaveText('Underlined text')
-    await expect(
-      typebotViewer(page).locator('a[href="https://github.com"]')
+      page.locator('typebot-standard').locator('a[href="https://github.com"]')
    ).toHaveText('My super link')
  })
 })
--- a/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
+++ b/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
@@ -7,7 +7,6 @@ import {
  VideoBubbleContentType,
 } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'

 const videoSrc =
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
@@ -57,9 +56,10 @@ test.describe.parallel('Video bubble block', () => {

      await page.goto(`/typebots/${typebotId}/edit`)
      await page.click('text=Preview')
-      await expect(
-        typebotViewer(page).locator('video > source')
-      ).toHaveAttribute('src', videoSrc)
+      await expect(page.locator('video > source').nth(1)).toHaveAttribute(
+        'src',
+        videoSrc
+      )
    })

    test('should display youtube video correctly', async ({ page }) => {
@@ -80,7 +80,7 @@ test.describe.parallel('Video bubble block', () => {

      await page.goto(`/typebots/${typebotId}/edit`)
      await page.click('text=Preview')
-      await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
+      await expect(page.locator('iframe').nth(1)).toHaveAttribute(
        'src',
        'https://www.youtube.com/embed/dQw4w9WgXcQ'
      )
@@ -104,7 +104,7 @@ test.describe.parallel('Video bubble block', () => {

      await page.goto(`/typebots/${typebotId}/edit`)
      await page.click('text=Preview')
-      await expect(typebotViewer(page).locator('iframe')).toHaveAttribute(
+      await expect(page.locator('iframe').nth(1)).toHaveAttribute(
        'src',
        'https://player.vimeo.com/video/649301125'
      )
--- a/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
@@ -6,7 +6,6 @@ import {
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultChoiceInputOptions, InputBlockType, ItemType } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { getTestAsset } from '@/test/utils/playwright'

 test.describe.parallel('Buttons input block', () => {
@@ -42,10 +41,10 @@ test.describe.parallel('Buttons input block', () => {
    await expect(page.locator('text=Item 2')).toBeHidden()

    await page.click('text=Preview')
-    const item3Button = typebotViewer(page).locator('button >> text=Item 3')
+    const item3Button = page.locator('button >> text=Item 3')
    await item3Button.click()
    await expect(item3Button).toBeHidden()
-    await expect(typebotViewer(page).locator('text=Item 3')).toBeVisible()
+    await expect(page.getByTestId('guest-bubble')).toHaveText('Item 3')
    await page.click('button[aria-label="Close"]')

    await page.click('[data-testid="block2-icon"]')
@@ -64,13 +63,11 @@ test.describe.parallel('Buttons input block', () => {

    await page.click('text=Preview')

-    await typebotViewer(page).locator('button >> text="Item 3"').click()
-    await typebotViewer(page).locator('button >> text="Item 1"').click()
-    await typebotViewer(page).locator('text=Go').click()
+    await page.locator('button >> text="Item 3"').click()
+    await page.locator('button >> text="Item 1"').click()
+    await page.locator('text=Go').click()

-    await expect(
-      typebotViewer(page).locator('text="Item 3, Item 1"')
-    ).toBeVisible()
+    await expect(page.locator('text="Item 3, Item 1"')).toBeVisible()
  })
 })

@@ -85,18 +82,18 @@ test('Variable buttons should work', async ({ page }) => {

  await page.goto(`/typebots/${typebotId}/edit`)
  await page.click('text=Preview')
-  await typebotViewer(page).locator('text=Variable item').click()
-  await expect(typebotViewer(page).locator('text=Variable item')).toBeVisible()
-  await expect(typebotViewer(page).locator('text=Ok great!')).toBeVisible()
+  await page.getByRole('button', { name: 'Variable item' }).click()
+  await expect(page.getByTestId('guest-bubble')).toHaveText('Variable item')
+  await expect(page.locator('text=Ok great!')).toBeVisible()
  await page.click('text="Item 1"')
  await page.fill('input[value="Item 1"]', '{{Item 2}}')
  await page.click('[data-testid="block1-icon"]')
  await page.click('text=Multiple choice?')
  await page.click('text="Restart"')
-  await typebotViewer(page).locator('text="Variable item" >> nth=0').click()
-  await typebotViewer(page).locator('text="Variable item" >> nth=1').click()
-  await typebotViewer(page).locator('text="Send"').click()
+  await page.getByTestId('button').first().click()
+  await page.getByTestId('button').nth(1).click()
+  await page.locator('text="Send"').click()
  await expect(
-    typebotViewer(page).locator('text="Variable item, Variable item"')
+    page.locator('text="Variable item, Variable item"')
  ).toBeVisible()
 })
--- a/apps/builder/src/features/blocks/inputs/date/date.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/date/date.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultDateInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe('Date input block', () => {
@@ -21,15 +20,14 @@ test.describe('Date input block', () => {
    await page.goto(`/typebots/${typebotId}/edit`)

    await page.click('text=Preview')
-    await expect(
-      typebotViewer(page).locator('[data-testid="from-date"]')
-    ).toHaveAttribute('type', 'date')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
-    await typebotViewer(page)
-      .locator('[data-testid="from-date"]')
-      .fill('2021-01-01')
-    await typebotViewer(page).locator(`button`).click()
-    await expect(typebotViewer(page).locator('text="01/01/2021"')).toBeVisible()
+    await expect(page.locator('[data-testid="from-date"]')).toHaveAttribute(
+      'type',
+      'date'
+    )
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
+    await page.locator('[data-testid="from-date"]').fill('2021-01-01')
+    await page.getByRole('button', { name: 'Send' }).click()
+    await expect(page.locator('text="01/01/2021"')).toBeVisible()

    await page.click(`text=Pick a date...`)
    await page.click('text=Is range?')
@@ -39,23 +37,19 @@ test.describe('Date input block', () => {
    await page.fill('#button', 'Go')

    await page.click('text=Restart')
+    await expect(page.locator(`[data-testid="from-date"]`)).toHaveAttribute(
+      'type',
+      'datetime-local'
+    )
+    await expect(page.locator(`[data-testid="to-date"]`)).toHaveAttribute(
+      'type',
+      'datetime-local'
+    )
+    await page.locator('[data-testid="from-date"]').fill('2021-01-01T11:00')
+    await page.locator('[data-testid="to-date"]').fill('2022-01-01T09:00')
+    await page.getByRole('button', { name: 'Go' }).click()
    await expect(
-      typebotViewer(page).locator(`[data-testid="from-date"]`)
-    ).toHaveAttribute('type', 'datetime-local')
-    await expect(
-      typebotViewer(page).locator(`[data-testid="to-date"]`)
-    ).toHaveAttribute('type', 'datetime-local')
-    await typebotViewer(page)
-      .locator('[data-testid="from-date"]')
-      .fill('2021-01-01T11:00')
-    await typebotViewer(page)
-      .locator('[data-testid="to-date"]')
-      .fill('2022-01-01T09:00')
-    await typebotViewer(page).locator(`button`).click()
-    await expect(
-      typebotViewer(page).locator(
-        'text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"'
-      )
+      page.locator('text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"')
    ).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultEmailInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe('Email input block', () => {
@@ -22,11 +21,11 @@ test.describe('Email input block', () => {

    await page.click('text=Preview')
    await expect(
-      typebotViewer(page).locator(
+      page.locator(
        `input[placeholder="${defaultEmailInputOptions.labels.placeholder}"]`
      )
    ).toHaveAttribute('type', 'email')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()

    await page.click(`text=${defaultEmailInputOptions.labels.placeholder}`)
    await page.fill(
@@ -41,19 +40,13 @@ test.describe('Email input block', () => {
    )

    await page.click('text=Restart')
-    await typebotViewer(page)
-      .locator(`input[placeholder="Your email..."]`)
-      .fill('test@test')
-    await typebotViewer(page).locator('text=Go').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator(`input[placeholder="Your email..."]`).fill('test@test')
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
      .locator(`input[placeholder="Your email..."]`)
      .fill('test@test.com')
-    await typebotViewer(page).locator('text=Go').click()
-    await expect(
-      typebotViewer(page).locator('text=test@test.com')
-    ).toBeVisible()
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(page.locator('text=test@test.com')).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
@@ -63,7 +63,7 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
        <CodeEditor
          lang="html"
          onChange={handlePlaceholderLabelChange}
-          value={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
          height={'100px'}
          withVariableButton={false}
        />
--- a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultFileInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 import { freeWorkspaceId } from 'utils/playwright/databaseSetup'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -24,14 +23,12 @@ test('options should work', async ({ page }) => {
  await page.goto(`/typebots/${typebotId}/edit`)

  await page.click('text=Preview')
-  await expect(
-    typebotViewer(page).locator(`text=Click to upload`)
-  ).toBeVisible()
-  await expect(typebotViewer(page).locator(`text="Skip"`)).toBeHidden()
-  await typebotViewer(page)
+  await expect(page.locator(`text=Click to upload`)).toBeVisible()
+  await expect(page.locator(`text="Skip"`)).toBeHidden()
+  await page
    .locator(`input[type="file"]`)
    .setInputFiles([getTestAsset('avatar.jpg')])
-  await expect(typebotViewer(page).locator(`text=File uploaded`)).toBeVisible()
+  await expect(page.locator(`text=File uploaded`)).toBeVisible()
  await page.click('text="Collect file"')
  await page.click('text="Required?"')
  await page.click('text="Allow multiple files?"')
@@ -41,20 +38,18 @@ test('options should work', async ({ page }) => {
  await page.fill('[value="Skip"]', 'Pass')
  await page.fill('input[value="10"]', '20')
  await page.click('text="Restart"')
-  await expect(typebotViewer(page).locator(`text="Pass"`)).toBeVisible()
-  await expect(typebotViewer(page).locator(`text="Upload now!!"`)).toBeVisible()
-  await typebotViewer(page)
+  await expect(page.locator(`text="Pass"`)).toBeVisible()
+  await expect(page.locator(`text="Upload now!!"`)).toBeVisible()
+  await page
    .locator(`input[type="file"]`)
    .setInputFiles([
      getTestAsset('avatar.jpg'),
      getTestAsset('avatar.jpg'),
      getTestAsset('avatar.jpg'),
    ])
-  await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
-  await typebotViewer(page).locator('text="Go"').click()
-  await expect(
-    typebotViewer(page).locator(`text="3 files uploaded"`)
-  ).toBeVisible()
+  await expect(page.locator(`text="3"`)).toBeVisible()
+  await page.locator('text="Go"').click()
+  await expect(page.locator(`text="3 files uploaded"`)).toBeVisible()
 })

 test.describe('Free workspace', () => {
--- a/apps/builder/src/features/blocks/inputs/number/number.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/number/number.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultNumberInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe('Number input block', () => {
@@ -22,11 +21,11 @@ test.describe('Number input block', () => {

    await page.click('text=Preview')
    await expect(
-      typebotViewer(page).locator(
+      page.locator(
        `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`
      )
    ).toHaveAttribute('type', 'number')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()

    await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
    await page.fill('#placeholder', 'Your number...')
@@ -37,15 +36,13 @@ test.describe('Number input block', () => {
    await page.fill('[role="spinbutton"] >> nth=2', '10')

    await page.click('text=Restart')
-    const input = typebotViewer(page).locator(
-      `input[placeholder="Your number..."]`
-    )
+    const input = page.locator(`input[placeholder="Your number..."]`)
    await input.fill('-1')
    await input.press('Enter')
    await input.fill('150')
    await input.press('Enter')
    await input.fill('50')
    await input.press('Enter')
-    await expect(typebotViewer(page).locator('text=50')).toBeVisible()
+    await expect(page.locator('text=50')).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
@@ -3,7 +3,6 @@ import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultPaymentInputOptions, InputBlockType } from 'models'
 import { createId } from '@paralleldrive/cuid2'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { stripePaymentForm } from '@/test/utils/selectorUtils'

 test.describe('Payment input block', () => {
@@ -59,9 +58,9 @@ test.describe('Payment input block', () => {
      .locator(`[placeholder="MM / YY"]`)
      .fill('12 / 25')
    await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
-    await typebotViewer(page).locator(`text="Pay 30€"`).click()
+    await page.locator(`text="Pay 30€"`).click()
    await expect(
-      typebotViewer(page).locator(`text="Your card has been declined."`)
+      page.locator(`text="Your card has been declined."`)
    ).toBeVisible()
    await stripePaymentForm(page)
      .locator(`[placeholder="1234 1234 1234 1234"]`)
@@ -69,7 +68,7 @@ test.describe('Payment input block', () => {
    const zipInput = stripePaymentForm(page).getByPlaceholder('90210')
    const isZipInputVisible = await zipInput.isVisible()
    if (isZipInputVisible) await zipInput.fill('12345')
-    await typebotViewer(page).locator(`text="Pay 30€"`).click()
-    await expect(typebotViewer(page).locator(`text="Success"`)).toBeVisible()
+    await page.locator(`text="Pay 30€"`).click()
+    await expect(page.locator(`text="Success"`)).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultPhoneInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe('Phone input block', () => {
@@ -22,11 +21,11 @@ test.describe('Phone input block', () => {

    await page.click('text=Preview')
    await expect(
-      typebotViewer(page).locator(
+      page.locator(
        `input[placeholder="${defaultPhoneInputOptions.labels.placeholder}"]`
      )
    ).toHaveAttribute('type', 'tel')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()

    await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`)
    await page.fill('#placeholder', '+33 XX XX XX XX')
@@ -37,21 +36,14 @@ test.describe('Phone input block', () => {
    )

    await page.click('text=Restart')
-    await typebotViewer(page)
-      .locator(`input[placeholder="+33 XX XX XX XX"]`)
-      .fill('+33 6 73')
-    await expect(typebotViewer(page).locator(`img`)).toHaveAttribute(
-      'alt',
-      'France'
-    )
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator(`input[placeholder="+33 XX XX XX XX"]`).type('+33 6 73')
+    await expect(page.getByRole('combobox')).toHaveText(/🇫🇷.+/)
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
      .locator(`input[placeholder="+33 XX XX XX XX"]`)
      .fill('+33 6 73 54 45 67')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(typebotViewer(page).locator('text=+33673544567')).toBeVisible()
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=+33 6 73 54 45 67')).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultRatingInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 const boxSvg = `<svg
@@ -33,10 +32,10 @@ test('options should work', async ({ page }) => {
  await page.goto(`/typebots/${typebotId}/edit`)

  await page.click('text=Preview')
-  await expect(typebotViewer(page).locator(`text=Send`)).toBeHidden()
-  await typebotViewer(page).locator(`text=8`).click()
-  await typebotViewer(page).locator(`text=Send`).click()
-  await expect(typebotViewer(page).locator(`text=8`)).toBeVisible()
+  await expect(page.locator(`text=Send`)).toBeHidden()
+  await page.locator(`text=8`).click()
+  await page.locator(`text=Send`).click()
+  await expect(page.locator(`text=8`)).toBeVisible()
  await page.click('text=Rate from 0 to 10')
  await page.click('text="10"')
  await page.click('text="5"')
@@ -48,14 +47,10 @@ test('options should work', async ({ page }) => {
  await page.fill('[placeholder="Not likely at all"]', 'Not likely at all')
  await page.fill('[placeholder="Extremely likely"]', 'Extremely likely')
  await page.click('text="Restart"')
-  await expect(typebotViewer(page).locator(`text=8`)).toBeHidden()
-  await expect(typebotViewer(page).locator(`text=4`)).toBeHidden()
-  await expect(
-    typebotViewer(page).locator(`text=Not likely at all`)
-  ).toBeVisible()
-  await expect(
-    typebotViewer(page).locator(`text=Extremely likely`)
-  ).toBeVisible()
-  await typebotViewer(page).locator(`svg >> nth=4`).click()
-  await expect(typebotViewer(page).locator(`text=5`)).toBeVisible()
+  await expect(page.locator(`text=8`)).toBeHidden()
+  await expect(page.locator(`text=4`)).toBeHidden()
+  await expect(page.locator(`text=Not likely at all`)).toBeVisible()
+  await expect(page.locator(`text=Extremely likely`)).toBeVisible()
+  await page.locator(`svg >> nth=4`).click()
+  await expect(page.locator(`text=5`)).toBeVisible()
 })
--- a/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultTextInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe.parallel('Text input block', () => {
@@ -22,11 +21,11 @@ test.describe.parallel('Text input block', () => {

    await page.click('text=Preview')
    await expect(
-      typebotViewer(page).locator(
+      page.locator(
        `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`
      )
    ).toHaveAttribute('type', 'text')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()

    await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
    await page.fill('#placeholder', 'Your name...')
@@ -35,8 +34,8 @@ test.describe.parallel('Text input block', () => {

    await page.click('text=Restart')
    await expect(
-      typebotViewer(page).locator(`textarea[placeholder="Your name..."]`)
+      page.locator(`textarea[placeholder="Your name..."]`)
    ).toBeVisible()
-    await expect(typebotViewer(page).locator(`text=Go`)).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Go' })).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/inputs/url/url.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/url/url.spec.ts
@@ -2,7 +2,6 @@ import test, { expect } from '@playwright/test'
 import { createTypebots } from 'utils/playwright/databaseActions'
 import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
 import { defaultUrlInputOptions, InputBlockType } from 'models'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'

 test.describe('Url input block', () => {
@@ -22,11 +21,13 @@ test.describe('Url input block', () => {

    await page.click('text=Preview')
    await expect(
-      typebotViewer(page).locator(
+      page.locator(
        `input[placeholder="${defaultUrlInputOptions.labels.placeholder}"]`
      )
    ).toHaveAttribute('type', 'url')
-    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+    await expect(
+      page.locator('typebot-standard').locator(`button`)
+    ).toBeDisabled()

    await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
    await page.fill('#placeholder', 'Your URL...')
@@ -38,19 +39,15 @@ test.describe('Url input block', () => {
    )

    await page.click('text=Restart')
-    await typebotViewer(page)
+    await page
      .locator(`input[placeholder="Your URL..."]`)
      .fill('https://https://test')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=Try again bro')
-    ).toBeVisible()
-    await typebotViewer(page)
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=Try again bro')).toBeVisible()
+    await page
      .locator(`input[placeholder="Your URL..."]`)
      .fill('https://website.com')
-    await typebotViewer(page).locator('button >> text="Go"').click()
-    await expect(
-      typebotViewer(page).locator('text=https://website.com')
-    ).toBeVisible()
+    await page.locator('button >> text="Go"').click()
+    await expect(page.locator('text=https://website.com')).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/chatwoot.spec.ts
@@ -36,7 +36,7 @@ test.describe('Chatwoot block', () => {
    await page.getByLabel('Phone number').fill('+33654347543')
    await page.getByRole('button', { name: 'Preview', exact: true }).click()
    await expect(
-      page.getByText("Chatwoot won't open in preview mode").nth(0)
+      page.getByText('Chatwoot block is not supported in preview').nth(0)
    ).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
@@ -1,6 +1,5 @@
 import test, { expect, Page } from '@playwright/test'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'

@@ -33,25 +32,17 @@ test.describe.parallel('Google sheets integration', () => {
    )

    await page.click('text=Preview')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type your email..."]')
      .fill('georges@gmail.com')
-    await Promise.all([
-      page.waitForResponse(
-        (resp) =>
-          resp
-            .request()
-            .url()
-            .includes(
-              '/api/integrations/google-sheets/spreadsheets/1k_pIDw3YHl9tlZusbBVSBRY0PeRPd2H6t4Nj7rwnOtM/sheets/0'
-            ) &&
-          resp.status() === 200 &&
-          resp.request().method() === 'POST'
-      ),
-      typebotViewer(page)
-        .locator('input[placeholder="Type your email..."]')
-        .press('Enter'),
-    ])
+    await page
+      .locator('typebot-standard')
+      .locator('input[placeholder="Type your email..."]')
+      .press('Enter')
+    await expect(
+      page.getByText('Succesfully inserted row in CRM > Sheet1').nth(0)
+    ).toBeVisible()
  })

  test('Update row should work', async ({ page }) => {
@@ -82,25 +73,17 @@ test.describe.parallel('Google sheets integration', () => {
    )

    await page.click('text=Preview')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type your email..."]')
      .fill('test@test.com')
-    await Promise.all([
-      page.waitForResponse(
-        (resp) =>
-          resp
-            .request()
-            .url()
-            .includes(
-              '/api/integrations/google-sheets/spreadsheets/1k_pIDw3YHl9tlZusbBVSBRY0PeRPd2H6t4Nj7rwnOtM/sheets/0'
-            ) &&
-          resp.status() === 200 &&
-          resp.request().method() === 'POST'
-      ),
-      typebotViewer(page)
-        .locator('input[placeholder="Type your email..."]')
-        .press('Enter'),
-    ])
+    await page
+      .locator('typebot-standard')
+      .locator('input[placeholder="Type your email..."]')
+      .press('Enter')
+    await expect(
+      page.getByText('Succesfully updated row in CRM > Sheet1').nth(0)
+    ).toBeVisible()
  })

  test('Get row should work', async ({ page }) => {
@@ -143,15 +126,17 @@ test.describe.parallel('Google sheets integration', () => {
    await createNewVar(page, 'Last name')

    await page.click('text=Preview')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type your email..."]')
      .fill('test2@test.com')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type your email..."]')
      .press('Enter')
-    await expect(typebotViewer(page).locator('text=Your name is:')).toHaveText(
-      /John|Fred|Georges/
-    )
+    await expect(
+      page.locator('typebot-standard').locator('text=Your name is:')
+    ).toHaveText(/John|Fred|Georges/)
  })
 })

--- a/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SendEmailSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SendEmailSettings.tsx
@@ -181,7 +181,7 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
          </Flex>
          {options.isBodyCode ? (
            <CodeEditor
-              value={options.body ?? ''}
+              defaultValue={options.body ?? ''}
              onChange={handleBodyChange}
              lang="html"
            />
--- a/apps/builder/src/features/blocks/integrations/sendEmail/queries/sendEmail.spec.ts
+++ b/apps/builder/src/features/blocks/integrations/sendEmail/queries/sendEmail.spec.ts
@@ -1,6 +1,5 @@
 import test, { expect } from '@playwright/test'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'

@@ -64,7 +63,7 @@ test.describe('Send email block', () => {
    await page.fill('[data-testid="body-input"]', 'Here is my email')

    await page.click('text=Preview')
-    await typebotViewer(page).locator('text=Go').click()
+    await page.locator('typebot-standard').locator('text=Go').click()
    await expect(
      page.locator('text=Emails are not sent in preview mode >> nth=0')
    ).toBeVisible()
--- a/apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx
@@ -223,7 +223,7 @@ export const WebhookSettings = ({
                />
                {(options.isCustomBody ?? true) && (
                  <CodeEditor
-                    value={localWebhook.body ?? ''}
+                    defaultValue={localWebhook.body ?? ''}
                    lang="json"
                    onChange={handleBodyChange}
                    debounceTimeout={0}
@@ -262,7 +262,7 @@ export const WebhookSettings = ({
          </Button>
        )}
        {testResponse && (
-          <CodeEditor isReadOnly lang="json" value={testResponse} />
+          <CodeEditor isReadOnly lang="json" defaultValue={testResponse} />
        )}
        {(testResponse || options?.responseVariableMapping.length > 0) && (
          <Accordion allowMultiple>
--- a/apps/builder/src/features/blocks/logic/condition/condition.spec.ts
+++ b/apps/builder/src/features/blocks/logic/condition/condition.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -51,30 +50,33 @@ test.describe('Condition block', () => {
    await page.fill('input[placeholder="Type a value..."]', '20')

    await page.click('text=Preview')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type a number..."]')
      .fill('15')
-    await typebotViewer(page).locator('text=Send').click()
+    await page.locator('typebot-standard').locator('text=Send').click()
    await expect(
-      typebotViewer(page).locator('text=You are younger than 20')
+      page.locator('typebot-standard').getByText('You are younger than 20')
    ).toBeVisible()

    await page.click('text=Restart')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type a number..."]')
      .fill('45')
-    await typebotViewer(page).locator('text=Send').click()
+    await page.locator('typebot-standard').locator('text=Send').click()
    await expect(
-      typebotViewer(page).locator('text=You are older than 20')
+      page.locator('typebot-standard').getByText('You are older than 20')
    ).toBeVisible()

    await page.click('text=Restart')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type a number..."]')
      .fill('90')
-    await typebotViewer(page).locator('text=Send').click()
+    await page.locator('typebot-standard').locator('text=Send').click()
    await expect(
-      typebotViewer(page).locator('text=You are older than 80')
+      page.locator('typebot-standard').getByText('You are older than 80')
    ).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts
+++ b/apps/builder/src/features/blocks/logic/redirect/redirect.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -20,7 +19,7 @@ test.describe('Redirect block', () => {
    await page.fill('input[placeholder="Type a URL..."]', 'google.com')

    await page.click('text=Preview')
-    await typebotViewer(page).locator('text=Go to URL').click()
+    await page.locator('typebot-standard').locator('text=Go to URL').click()
    await expect(page).toHaveURL('https://www.google.com')
    await page.goBack()

@@ -30,7 +29,7 @@ test.describe('Redirect block', () => {
    await page.click('text=Preview')
    const [newPage] = await Promise.all([
      context.waitForEvent('page'),
-      typebotViewer(page).locator('text=Go to URL').click(),
+      page.locator('typebot-standard').locator('text=Go to URL').click(),
    ])
    await newPage.waitForLoadState()
    await expect(newPage).toHaveURL('https://www.google.com')
--- a/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
@@ -41,8 +41,8 @@ export const ScriptSettings = ({ options, onOptionsChange }: Props) => {
      <Stack>
        <Text>Code:</Text>
        <CodeEditor
-          value={options.content ?? ''}
-          lang="js"
+          defaultValue={options.content ?? ''}
+          lang="javascript"
          onChange={handleCodeChange}
        />
      </Stack>
--- a/apps/builder/src/features/blocks/logic/script/script.spec.ts
+++ b/apps/builder/src/features/blocks/logic/script/script.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -20,7 +19,7 @@ test.describe('Script block', () => {
    )

    await page.click('text=Preview')
-    await typebotViewer(page).locator('text=Trigger code').click()
+    await page.getByRole('button', { name: 'Trigger code' }).click()
    await expect(page).toHaveURL('https://www.google.com')
  })
 })
--- a/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx
+++ b/apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx
@@ -51,9 +51,9 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {

        {options.isCode ?? false ? (
          <CodeEditor
-            value={options.expressionToEvaluate ?? ''}
+            defaultValue={options.expressionToEvaluate ?? ''}
            onChange={handleExpressionChange}
-            lang="js"
+            lang="javascript"
          />
        ) : (
          <Textarea
--- a/apps/builder/src/features/blocks/logic/setVariable/setVariable.spec.ts
+++ b/apps/builder/src/features/blocks/logic/setVariable/setVariable.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -42,18 +41,19 @@ test.describe('Set variable block', () => {
    await page.fill('textarea', '1000 + {{Total}}')

    await page.click('text=Preview')
-    await typebotViewer(page)
+    await page
+      .locator('typebot-standard')
      .locator('input[placeholder="Type a number..."]')
      .fill('365')
-    await typebotViewer(page).locator('text=Send').click()
+    await page.locator('typebot-standard').locator('text=Send').click()
    await expect(
-      typebotViewer(page).locator('text=Multiplication: 365000')
+      page.locator('typebot-standard').locator('text=Multiplication: 365000')
    ).toBeVisible()
    await expect(
-      typebotViewer(page).locator('text=Custom var: Custom value')
+      page.locator('typebot-standard').locator('text=Custom var: Custom value')
    ).toBeVisible()
    await expect(
-      typebotViewer(page).locator('text=Addition: 366000')
+      page.locator('typebot-standard').locator('text=Addition: 366000')
    ).toBeVisible()
  })
 })
--- a/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
+++ b/apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -35,7 +34,9 @@ test('should be configurable', async ({ page }) => {
  await page.click('text=Group #2')

  await page.click('text=Preview')
-  await expect(typebotViewer(page).locator('text=Second block')).toBeVisible()
+  await expect(
+    page.locator('typebot-standard').locator('text=Second block')
+  ).toBeVisible()

  await page.click('[aria-label="Close"]')
  await page.click('text=Jump to Group #2 in My link typebot 2')
@@ -44,9 +45,11 @@ test('should be configurable', async ({ page }) => {
  await page.click('button >> text=Start')

  await page.click('text=Preview')
-  await typebotViewer(page).locator('input').fill('Hello there!')
-  await typebotViewer(page).locator('input').press('Enter')
-  await expect(typebotViewer(page).locator('text=Hello there!')).toBeVisible()
+  await page.locator('typebot-standard').locator('input').fill('Hello there!')
+  await page.locator('typebot-standard').locator('input').press('Enter')
+  await expect(
+    page.locator('typebot-standard').locator('text=Hello there!')
+  ).toBeVisible()

  await page.click('[aria-label="Close"]')
  await page.click('text=Jump to Start in My link typebot 2')
@@ -61,5 +64,7 @@ test('should be configurable', async ({ page }) => {
  await page.click('button >> text=Hello')

  await page.click('text=Preview')
-  await expect(typebotViewer(page).locator('text=Hello world')).toBeVisible()
+  await expect(
+    page.locator('typebot-standard').locator('text=Hello world')
+  ).toBeVisible()
 })
--- a/apps/builder/src/features/blocks/logic/wait/wait.spec.ts
+++ b/apps/builder/src/features/blocks/logic/wait/wait.spec.ts
@@ -1,5 +1,4 @@
 import test, { expect } from '@playwright/test'
-import { typebotViewer } from 'utils/playwright/testHelpers'
 import { importTypebotInDatabase } from 'utils/playwright/databaseActions'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
@@ -17,10 +16,14 @@ test.describe('Wait block', () => {
    await page.getByRole('textbox', { name: 'Seconds to wait for:' }).fill('3')

    await page.click('text=Preview')
-    await typebotViewer(page).locator('text=Wait now').click()
+    await page.getByRole('button', { name: 'Wait now' }).click()
    await page.waitForTimeout(1000)
-    await expect(typebotViewer(page).locator('text="Hi there!"')).toBeHidden()
+    await expect(
+      page.locator('typebot-standard').locator('text="Hi there!"')
+    ).toBeHidden()
    await page.waitForTimeout(3000)
-    await expect(typebotViewer(page).locator('text="Hi there!"')).toBeVisible()
+    await expect(
+      page.locator('typebot-standard').locator('text="Hi there!"')
+    ).toBeVisible()
  })
 })