feat(viewer): ✨ Add variables in URL support

2022-02-17 10:46:04 +01:00
parent f7d6f0b766
commit 6e0ab67502
15 changed files with 550 additions and 58 deletions
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
@ -13,8 +13,16 @@ export const headerHeight = 56

 export const TypebotHeader = () => {
  const router = useRouter()
-  const { typebot, updateOnBothTypebots, save, undo, redo, canUndo, canRedo } =
-    useTypebot()
+  const {
+    typebot,
+    updateOnBothTypebots,
+    save,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    publishedTypebot,
+  } = useTypebot()
  const { setRightPanel } = useEditor()

  const handleBackClick = async () => {
@ -77,14 +85,16 @@ export const TypebotHeader = () => {
        >
          Share
        </Button>
-        <Button
-          as={NextChakraLink}
-          href={`/typebots/${typebot?.id}/results`}
-          colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
-          variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
-        >
-          Results
-        </Button>
+        {typebot?.publishedTypebotId && (
+          <Button
+            as={NextChakraLink}
+            href={`/typebots/${typebot?.id}/results`}
+            colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
+            variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
+          >
+            Results
+          </Button>
+        )}
      </HStack>
      <Flex pos="absolute" left="1rem" justify="center" align="center">
        <HStack alignItems="center">
--- a/apps/builder/contexts/TypebotContext/TypebotContext.tsx
+++ b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
@ -22,7 +22,7 @@ import {
 } from 'services/typebots'
 import { fetcher, preventUserFromRefreshing } from 'services/utils'
 import useSWR from 'swr'
-import { isDefined } from 'utils'
+import { isDefined, isNotDefined } from 'utils'
 import { BlocksActions, blocksActions } from './actions/blocks'
 import { stepsAction, StepsActions } from './actions/steps'
 import { variablesAction, VariablesActions } from './actions/variables'
@ -217,6 +217,13 @@ export const TypebotContext = ({
    if (!localTypebot) return
    const publishedTypebotId = generate()
    const newLocalTypebot = { ...localTypebot }
+    if (
+      localPublishedTypebot &&
+      isNotDefined(localTypebot.publishedTypebotId)
+    ) {
+      updateLocalTypebot({ publishedTypebotId: localPublishedTypebot.id })
+      await saveTypebot()
+    }
    if (!localPublishedTypebot) {
      const newPublicId = parseDefaultPublicId(
        localTypebot.name,
@ -224,8 +231,8 @@ export const TypebotContext = ({
      )
      updateLocalTypebot({ publicId: newPublicId, publishedTypebotId })
      newLocalTypebot.publicId = newPublicId
+      await saveTypebot()
    }
-    if (hasUnsavedChanges || !localPublishedTypebot) await saveTypebot()
    if (localPublishedTypebot) {
      await savePublishedTypebot({
        ...parseTypebotToPublicTypebot(newLocalTypebot),
--- a/apps/builder/layouts/results/ResultsContent.tsx
+++ b/apps/builder/layouts/results/ResultsContent.tsx
@ -6,13 +6,14 @@ import { useRouter } from 'next/router'
 import React, { useMemo } from 'react'
 import { useStats } from 'services/analytics'
 import { isFreePlan } from 'services/user'
+import { isDefined } from 'utils'
 import { AnalyticsContent } from './AnalyticsContent'
 import { SubmissionsContent } from './SubmissionContent'

 export const ResultsContent = () => {
  const router = useRouter()
  const { user } = useUser()
-  const { typebot } = useTypebot()
+  const { typebot, publishedTypebot } = useTypebot()
  const isAnalytics = useMemo(
    () => router.pathname.endsWith('analytics'),
    [router.pathname]
@ -23,7 +24,7 @@ export const ResultsContent = () => {
  })

  const { stats, mutate } = useStats({
-    typebotId: typebot?.id,
+    typebotId: publishedTypebot?.typebotId,
    onError: (err) => toast({ title: err.name, description: err.message }),
  })

@ -71,12 +72,12 @@ export const ResultsContent = () => {
        </HStack>
      </Flex>
      <Flex pt="60px" w="full" justify="center">
-        {typebot &&
+        {publishedTypebot &&
          (isAnalytics ? (
            <AnalyticsContent stats={stats} />
          ) : (
            <SubmissionsContent
-              typebotId={typebot.id}
+              typebotId={publishedTypebot.typebotId}
              onDeleteResults={handleDeletedResults}
              totalResults={stats?.totalStarts ?? 0}
              totalHiddenResults={
--- a/apps/builder/layouts/results/SubmissionContent.tsx
+++ b/apps/builder/layouts/results/SubmissionContent.tsx
@ -10,7 +10,7 @@ import {
  useResults,
 } from 'services/results'
 import { unparse } from 'papaparse'
-import { PublishFirstInfo, UnlockProPlanInfo } from 'components/shared/Info'
+import { UnlockProPlanInfo } from 'components/shared/Info'

 type Props = {
  typebotId: string
@ -111,7 +111,6 @@ export const SubmissionsContent = ({

  return (
    <Stack maxW="1200px" w="full" pb="28">
-      <PublishFirstInfo />
      {totalHiddenResults && (
        <UnlockProPlanInfo
          buttonLabel={`Unlock ${totalHiddenResults} results`}
--- a/apps/builder/playwright/fixtures/typebots/results/submissionHeader.json
+++ b/apps/builder/playwright/fixtures/typebots/results/submissionHeader.json
@ -0,0 +1,355 @@
+{
+  "id": "8hASqMTjwFVzB32vRcVND5",
+  "createdAt": "2022-02-05T06:21:16.522Z",
+  "updatedAt": "2022-02-05T06:21:16.522Z",
+  "name": "My typebot",
+  "ownerId": "ckzmhmiey001009mnzt5nkxu8",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "blocks": [
+    {
+      "id": "k6kY6gwRE6noPoYQNGzgUq",
+      "steps": [
+        {
+          "id": "22HP69iipkLjJDTUcc1AWW",
+          "type": "start",
+          "label": "Start",
+          "blockId": "k6kY6gwRE6noPoYQNGzgUq",
+          "outgoingEdgeId": "oNvqaqNExdSH2kKEhKZHuE"
+        }
+      ],
+      "title": "Start",
+      "graphCoordinates": { "x": 0, "y": 0 }
+    },
+    {
+      "id": "kinRXxYop2X4d7F9qt8WNB",
+      "steps": [
+        {
+          "id": "sc1y8VwDabNJgiVTBi4qtif",
+          "type": "text",
+          "blockId": "kinRXxYop2X4d7F9qt8WNB",
+          "content": {
+            "html": "<div>Welcome to <span class=\"slate-bold\">AA</span> (Awesome Agency)</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [
+                  { "text": "Welcome to " },
+                  { "bold": true, "text": "AA" },
+                  { "text": " (Awesome Agency)" }
+                ]
+              }
+            ],
+            "plainText": "Welcome to AA (Awesome Agency)"
+          }
+        },
+        {
+          "id": "s7YqZTBeyCa4Hp3wN2j922c",
+          "type": "image",
+          "blockId": "kinRXxYop2X4d7F9qt8WNB",
+          "content": {
+            "url": "https://media2.giphy.com/media/XD9o33QG9BoMis7iM4/giphy.gif?cid=fe3852a3ihg8rvipzzky5lybmdyq38fhke2tkrnshwk52c7d&rid=giphy.gif&ct=g"
+          }
+        },
+        {
+          "id": "sbjZWLJGVkHAkDqS4JQeGow",
+          "type": "choice input",
+          "items": [
+            {
+              "id": "hQw2zbp7FDX7XYK9cFpbgC",
+              "type": 0,
+              "stepId": "sbjZWLJGVkHAkDqS4JQeGow",
+              "content": "Hi!"
+            }
+          ],
+          "blockId": "kinRXxYop2X4d7F9qt8WNB",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+          "outgoingEdgeId": "i51YhHpk1dtSyduFNf5Wim"
+        }
+      ],
+      "title": "Welcome",
+      "graphCoordinates": { "x": 0, "y": 154 }
+    },
+    {
+      "id": "o4SH1UtKANnW5N5D67oZUz",
+      "steps": [
+        {
+          "id": "sxeYubYN6XzhAfG7m9Fivhc",
+          "type": "text",
+          "blockId": "o4SH1UtKANnW5N5D67oZUz",
+          "content": {
+            "html": "<div>Great! Nice to meet you {{Name}}</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [{ "text": "Great! Nice to meet you {{Name}}" }]
+              }
+            ],
+            "plainText": "Great! Nice to meet you {{Name}}"
+          }
+        },
+        {
+          "id": "scQ5kduafAtfP9T8SHUJnGi",
+          "type": "text",
+          "blockId": "o4SH1UtKANnW5N5D67oZUz",
+          "content": {
+            "html": "<div>What&#x27;s the best email we can reach you at?</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [
+                  { "text": "What's the best email we can reach you at?" }
+                ]
+              }
+            ],
+            "plainText": "What's the best email we can reach you at?"
+          }
+        },
+        {
+          "id": "snbsad18Bgry8yZ8DZCfdFD",
+          "type": "email input",
+          "blockId": "o4SH1UtKANnW5N5D67oZUz",
+          "options": {
+            "labels": { "button": "Send", "placeholder": "Type your email..." },
+            "variableId": "3VFChNVSCXQ2rXv4DrJ8Ah"
+          },
+          "outgoingEdgeId": "w3MiN1Ct38jT5NykVsgmb5"
+        }
+      ],
+      "title": "Email",
+      "graphCoordinates": { "x": 639, "y": 142 }
+    },
+    {
+      "id": "q5dAhqSTCaNdiGSJm9B9Rw",
+      "steps": [
+        {
+          "id": "sgtE2Sy7cKykac9B223Kq9R",
+          "type": "text",
+          "blockId": "q5dAhqSTCaNdiGSJm9B9Rw",
+          "content": {
+            "html": "<div>What&#x27;s your name?</div>",
+            "richText": [
+              { "type": "p", "children": [{ "text": "What's your name?" }] }
+            ],
+            "plainText": "What's your name?"
+          }
+        },
+        {
+          "id": "sqEsMo747LTDnY9FjQcEwUv",
+          "type": "text input",
+          "blockId": "q5dAhqSTCaNdiGSJm9B9Rw",
+          "options": {
+            "isLong": false,
+            "labels": {
+              "button": "Send",
+              "placeholder": "Type your answer..."
+            },
+            "variableId": "giiLFGw5xXBCHzvp1qAbdX"
+          },
+          "outgoingEdgeId": "4tYbERpi5Po4goVgt6rWXg"
+        }
+      ],
+      "title": "Name",
+      "graphCoordinates": { "x": 322, "y": 296 }
+    },
+    {
+      "id": "fKqRz7iswk7ULaj5PJocZL",
+      "steps": [
+        {
+          "id": "su7HceVXWyTCzi2vv3m4QbK",
+          "type": "text",
+          "blockId": "fKqRz7iswk7ULaj5PJocZL",
+          "content": {
+            "html": "<div>What services are you interested in?</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [{ "text": "What services are you interested in?" }]
+              }
+            ],
+            "plainText": "What services are you interested in?"
+          }
+        },
+        {
+          "id": "s5VQGsVF4hQgziQsXVdwPDW",
+          "type": "choice input",
+          "items": [
+            {
+              "id": "fnLCBF4NdraSwcubnBhk8H",
+              "type": 0,
+              "stepId": "s5VQGsVF4hQgziQsXVdwPDW",
+              "content": "Website dev"
+            },
+            {
+              "id": "a782h8ynMouY84QjH7XSnR",
+              "type": 0,
+              "stepId": "s5VQGsVF4hQgziQsXVdwPDW",
+              "content": "Content Marketing"
+            },
+            {
+              "id": "jGvh94zBByvVFpSS3w97zY",
+              "type": 0,
+              "stepId": "s5VQGsVF4hQgziQsXVdwPDW",
+              "content": "Social Media"
+            },
+            {
+              "id": "6PRLbKUezuFmwWtLVbvAQ7",
+              "type": 0,
+              "stepId": "s5VQGsVF4hQgziQsXVdwPDW",
+              "content": "UI / UX Design"
+            }
+          ],
+          "blockId": "fKqRz7iswk7ULaj5PJocZL",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": true },
+          "outgoingEdgeId": "ohTRakmcYJ7GdFWRZrWRjk"
+        }
+      ],
+      "title": "Services",
+      "graphCoordinates": { "x": 943, "y": -1 }
+    },
+    {
+      "id": "7qHBEyCMvKEJryBHzPmHjV",
+      "steps": [
+        {
+          "id": "sqR8Sz9gW21aUYKtUikq7qZ",
+          "type": "text",
+          "blockId": "7qHBEyCMvKEJryBHzPmHjV",
+          "content": {
+            "html": "<div>Can you tell me a bit more about your needs?</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [
+                  { "text": "Can you tell me a bit more about your needs?" }
+                ]
+              }
+            ],
+            "plainText": "Can you tell me a bit more about your needs?"
+          }
+        },
+        {
+          "id": "sqFy2G3C1mh9p6s3QBdSS5x",
+          "type": "text input",
+          "blockId": "7qHBEyCMvKEJryBHzPmHjV",
+          "options": {
+            "isLong": true,
+            "labels": { "button": "Send", "placeholder": "Type your answer..." }
+          },
+          "outgoingEdgeId": "sH5nUssG2XQbm6ZidGv9BY"
+        }
+      ],
+      "title": "Additional information",
+      "graphCoordinates": { "x": 1308, "y": 42 }
+    },
+    {
+      "id": "vF7AD7zSAj7SNvN3gr9N94",
+      "steps": [
+        {
+          "id": "seLegenCgUwMopRFeAefqZ7",
+          "type": "text",
+          "blockId": "vF7AD7zSAj7SNvN3gr9N94",
+          "content": {
+            "html": "<div>Perfect!</div>",
+            "richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }],
+            "plainText": "Perfect!"
+          }
+        },
+        {
+          "id": "s779Q1y51aVaDUJVrFb16vv",
+          "type": "text",
+          "blockId": "vF7AD7zSAj7SNvN3gr9N94",
+          "content": {
+            "html": "<div>We&#x27;ll get back to you at {{Email}}</div>",
+            "richText": [
+              {
+                "type": "p",
+                "children": [{ "text": "We'll get back to you at {{Email}}" }]
+              }
+            ],
+            "plainText": "We'll get back to you at {{Email}}"
+          },
+          "outgoingEdgeId": "r2zwZYe33EdggUeG9Lmi3R"
+        }
+      ],
+      "title": "Bye",
+      "graphCoordinates": { "x": 1668, "y": 143 }
+    }
+  ],
+  "variables": [
+    { "id": "giiLFGw5xXBCHzvp1qAbdX", "name": "Name" },
+    { "id": "3VFChNVSCXQ2rXv4DrJ8Ah", "name": "Email" },
+    { "id": "8Q8t9YCc3ieAEXSYkmnCxH", "name": "utm_source" },
+    { "id": "ds54chWAyWC4zjkdWAm3Vc", "name": "utm_userid" }
+  ],
+  "edges": [
+    {
+      "id": "oNvqaqNExdSH2kKEhKZHuE",
+      "to": { "blockId": "kinRXxYop2X4d7F9qt8WNB" },
+      "from": {
+        "stepId": "22HP69iipkLjJDTUcc1AWW",
+        "blockId": "k6kY6gwRE6noPoYQNGzgUq"
+      }
+    },
+    {
+      "id": "i51YhHpk1dtSyduFNf5Wim",
+      "to": { "blockId": "q5dAhqSTCaNdiGSJm9B9Rw" },
+      "from": {
+        "stepId": "sbjZWLJGVkHAkDqS4JQeGow",
+        "blockId": "kinRXxYop2X4d7F9qt8WNB"
+      }
+    },
+    {
+      "id": "4tYbERpi5Po4goVgt6rWXg",
+      "to": { "blockId": "o4SH1UtKANnW5N5D67oZUz" },
+      "from": {
+        "stepId": "sqEsMo747LTDnY9FjQcEwUv",
+        "blockId": "q5dAhqSTCaNdiGSJm9B9Rw"
+      }
+    },
+    {
+      "id": "w3MiN1Ct38jT5NykVsgmb5",
+      "to": { "blockId": "fKqRz7iswk7ULaj5PJocZL" },
+      "from": {
+        "stepId": "snbsad18Bgry8yZ8DZCfdFD",
+        "blockId": "o4SH1UtKANnW5N5D67oZUz"
+      }
+    },
+    {
+      "id": "ohTRakmcYJ7GdFWRZrWRjk",
+      "to": { "blockId": "7qHBEyCMvKEJryBHzPmHjV" },
+      "from": {
+        "stepId": "s5VQGsVF4hQgziQsXVdwPDW",
+        "blockId": "fKqRz7iswk7ULaj5PJocZL"
+      }
+    },
+    {
+      "id": "sH5nUssG2XQbm6ZidGv9BY",
+      "to": { "blockId": "vF7AD7zSAj7SNvN3gr9N94" },
+      "from": {
+        "stepId": "sqFy2G3C1mh9p6s3QBdSS5x",
+        "blockId": "7qHBEyCMvKEJryBHzPmHjV"
+      }
+    }
+  ],
+  "theme": {
+    "chat": {
+      "inputs": {
+        "color": "#303235",
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
+  },
+  "settings": {
+    "general": { "isBrandingEnabled": true },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null
+}
--- a/apps/builder/playwright/services/database.ts
+++ b/apps/builder/playwright/services/database.ts
@ -160,7 +160,7 @@ const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
  publicId: null,
  publishedTypebotId: null,
  updatedAt: new Date(),
-  variables: [],
+  variables: [{ id: 'var1', name: 'var1' }],
  ...partialTypebot,
  edges: [
    {
@ -207,7 +207,7 @@ export const parseDefaultBlockWithStep = (
  ],
 })

-export const importTypebotInDatabase = (
+export const importTypebotInDatabase = async (
  path: string,
  updates?: Partial<Typebot>
 ) => {
@ -216,7 +216,13 @@ export const importTypebotInDatabase = (
    ...updates,
    ownerId: 'proUser',
  }
-  return prisma.typebot.create({
+  await prisma.typebot.create({
    data: typebot,
  })
+  return prisma.publicTypebot.create({
+    data: parseTypebotToPublicTypebot(
+      updates?.id ? `${updates?.id}-public` : 'publicBot',
+      typebot
+    ),
+  })
 }
--- a/apps/builder/playwright/tests/inputs/text.spec.ts
+++ b/apps/builder/playwright/tests/inputs/text.spec.ts
@ -7,7 +7,7 @@ import { defaultTextInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import { generate } from 'short-uuid'

-test.describe('Text input step', () => {
+test.describe.parallel('Text input step', () => {
  test('options should work', async ({ page }) => {
    const typebotId = generate()
    await createTypebots([
@ -41,4 +41,26 @@ test.describe('Text input step', () => {
    ).toBeVisible()
    await expect(typebotViewer(page).locator(`text=Go`)).toBeVisible()
  })
+
+  test('variable in URL should prefill the input', async ({ page }) => {
+    const typebotId = generate()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultBlockWithStep({
+          type: InputStepType.TEXT,
+          options: { ...defaultTextInputOptions, variableId: 'var1' },
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit?var1=My prefilled answer`)
+    await page.click('text=Preview')
+    await expect(
+      typebotViewer(page).locator(
+        `input[placeholder="${defaultTextInputOptions.labels.placeholder}"]`
+      )
+    ).toHaveAttribute('value', 'My prefilled answer')
+    await expect(typebotViewer(page).locator(`button`)).toBeEnabled()
+  })
 })
--- a/apps/builder/playwright/tests/results.spec.ts
+++ b/apps/builder/playwright/tests/results.spec.ts
@ -7,6 +7,7 @@ import { generate } from 'short-uuid'
 import {
  createResults,
  createTypebots,
+  importTypebotInDatabase,
  parseDefaultBlockWithStep,
 } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'
@ -14,6 +15,30 @@ import { deleteButtonInConfirmDialog } from '../services/selectorUtils'
 const typebotId = generate()

 test.describe('Results page', () => {
+  test('Submission table header should be parsed correctly', async ({
+    page,
+  }) => {
+    const typebotId = generate()
+    await importTypebotInDatabase(
+      path.join(
+        __dirname,
+        '../fixtures/typebots/results/submissionHeader.json'
+      ),
+      {
+        id: typebotId,
+      }
+    )
+    await page.goto(`/typebots/${typebotId}/results`)
+    await expect(page.locator('text=Submitted at')).toBeVisible()
+    await expect(page.locator('text=Welcome')).toBeVisible()
+    await expect(page.locator('text=Email')).toBeVisible()
+    await expect(page.locator('text=Name')).toBeVisible()
+    await expect(page.locator('text=Services')).toBeVisible()
+    await expect(page.locator('text=Additional information')).toBeVisible()
+    await expect(page.locator('text=utm_source')).toBeVisible()
+    await expect(page.locator('text=utm_userid')).toBeVisible()
+  })
+
  test('results should be deletable', async ({ page }) => {
    await createTypebots([
      {
--- a/apps/builder/playwright/tests/theme.spec.ts
+++ b/apps/builder/playwright/tests/theme.spec.ts
@ -45,7 +45,7 @@ test.describe.parallel('Theme page', () => {
  })

  test.describe('Chat', () => {
-    test.only('should reflect change in real-time', async ({ page }) => {
+    test('should reflect change in real-time', async ({ page }) => {
      const typebotId = 'chat-theme-typebot'
      try {
        await importTypebotInDatabase(
--- a/apps/builder/services/publicTypebot.tsx
+++ b/apps/builder/services/publicTypebot.tsx
@ -1,7 +1,7 @@
 import { Block, PublicBlock, PublicStep, PublicTypebot, Typebot } from 'models'
 import shortId from 'short-uuid'
 import { HStack, Text } from '@chakra-ui/react'
-import { CalendarIcon } from 'assets/icons'
+import { CalendarIcon, CodeIcon } from 'assets/icons'
 import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
 import { isInputStep, sendRequest } from 'utils'
 import { isDefined } from '@udecode/plate-common'
@ -64,30 +64,58 @@ export const parseSubmissionsColumns = (
      ),
      accessor: 'createdAt',
    },
-    ...typebot.blocks
-      .filter(
-        (block) => typebot && block.steps.some((step) => isInputStep(step))
-      )
-      .map((block) => {
-        const inputStep = block.steps.find((step) => isInputStep(step))
-        if (!inputStep || !isInputStep(inputStep)) return
-        return {
-          Header: (
-            <HStack
-              minW={
-                'isLong' in inputStep.options && inputStep.options.isLong
-                  ? '400px'
-                  : '150px'
-              }
-              maxW="500px"
-            >
-              <StepIcon type={inputStep.type} />
-              <Text>{block.title}</Text>
-            </HStack>
-          ),
-          accessor: block.id,
-        }
-      })
-      .filter(isDefined),
+    ...parseBlocksHeaders(typebot),
+    ...parseVariablesHeaders(typebot),
  ]
 }
+
+const parseBlocksHeaders = (typebot: PublicTypebot) =>
+  typebot.blocks
+    .filter((block) => typebot && block.steps.some((step) => isInputStep(step)))
+    .map((block) => {
+      const inputStep = block.steps.find((step) => isInputStep(step))
+      if (!inputStep || !isInputStep(inputStep)) return
+      return {
+        Header: (
+          <HStack
+            minW={
+              'isLong' in inputStep.options && inputStep.options.isLong
+                ? '400px'
+                : '150px'
+            }
+            maxW="500px"
+          >
+            <StepIcon type={inputStep.type} />
+            <Text>{block.title}</Text>
+          </HStack>
+        ),
+        accessor: block.id,
+      }
+    })
+    .filter(isDefined)
+
+const parseVariablesHeaders = (typebot: PublicTypebot) =>
+  typebot.variables
+    .map((v) => {
+      const isVariableInInputStep = isDefined(
+        typebot.blocks.find((b) => {
+          const inputStep = b.steps.find((step) => isInputStep(step))
+          return (
+            inputStep &&
+            isInputStep(inputStep) &&
+            inputStep.options.variableId === v.id
+          )
+        })
+      )
+      if (isVariableInInputStep) return
+      return {
+        Header: (
+          <HStack minW={'150px'} maxW="500px">
+            <CodeIcon />
+            <Text>{v.name}</Text>
+          </HStack>
+        ),
+        accessor: v.id,
+      }
+    })
+    .filter(isDefined)