diff --git a/apps/builder/next.config.js b/apps/builder/next.config.js
index 3b24d76bc6..6a7f2fe6cd 100644
--- a/apps/builder/next.config.js
+++ b/apps/builder/next.config.js
@@ -1,11 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
const { withSentryConfig } = require('@sentry/nextjs')
const path = require('path')
-const withTM = require('next-transpile-modules')([
- 'utils',
- 'models',
- 'emails',
- 'bot-engine',
-])
+const withTM = require('next-transpile-modules')(['utils', 'models', 'emails'])
/** @type {import('next').NextConfig} */
const nextConfig = withTM({
diff --git a/apps/builder/package.json b/apps/builder/package.json
index d1faf75b00..b96f688fa2 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -17,13 +17,6 @@
"@chakra-ui/css-reset": "2.0.11",
"@chakra-ui/react": "2.5.0",
"@chakra-ui/theme-tools": "^2.0.16",
- "@codemirror/lang-css": "6.0.1",
- "@codemirror/lang-html": "6.4.1",
- "@codemirror/lang-javascript": "6.1.2",
- "@codemirror/lang-json": "6.0.1",
- "@codemirror/lint": "6.1.0",
- "@codemirror/state": "6.2.0",
- "@codemirror/theme-one-dark": "^6.1.0",
"@dnd-kit/core": "6.0.7",
"@dnd-kit/sortable": "7.0.2",
"@dnd-kit/utilities": "3.2.1",
@@ -52,12 +45,17 @@
"@udecode/plate-ui-toolbar": "19.2.0",
"@use-gesture/react": "^10.2.24",
"aws-sdk": "2.1304.0",
- "bot-engine": "workspace:*",
"browser-image-compression": "2.0.0",
"canvas-confetti": "1.6.0",
"chakra-react-select": "^4.4.3",
"codemirror": "6.0.1",
"@paralleldrive/cuid2": "2.0.1",
+ "@typebot.io/js": "workspace:*",
+ "@typebot.io/react": "workspace:*",
+ "@uiw/codemirror-extensions-langs": "^4.19.7",
+ "@uiw/codemirror-theme-github": "^4.19.7",
+ "@uiw/codemirror-theme-tokyo-night": "^4.19.7",
+ "@uiw/react-codemirror": "^4.19.7",
"deep-object-diff": "1.1.9",
"dequal": "2.0.3",
"emails": "workspace:*",
@@ -94,7 +92,6 @@
"swr": "2.0.3",
"tinycolor2": "1.5.2",
"trpc-openapi": "1.1.2",
- "typebot-js": "workspace:*",
"use-debounce": "9.0.3"
},
"devDependencies": {
diff --git a/apps/builder/public/bots/onboarding-dark.json b/apps/builder/public/bots/onboarding-dark.json
index edd6b376f8..314b6f51a5 100644
--- a/apps/builder/public/bots/onboarding-dark.json
+++ b/apps/builder/public/bots/onboarding-dark.json
@@ -6,21 +6,22 @@
"folderId": null,
"groups": [
{
- "id": "cl1265zct0000mb1a6bir36w7",
+ "id": "clcueadzi00043b6s1r8wnql8",
+ "title": "Start",
"blocks": [
{
"id": "cl1265zct0001mb1afel460do",
"type": "start",
"label": "Start",
- "groupId": "cl1265zct0000mb1a6bir36w7",
- "outgoingEdgeId": "cl1266kt100082e6d1wks5dtp"
+ "groupId": "clcueadzi00043b6s1r8wnql8",
+ "outgoingEdgeId": "clcuefdfv000r3b6sqzv3prz3"
}
],
- "title": "Start",
"graphCoordinates": { "x": 0, "y": 0 }
},
{
- "id": "cl1266bah00032e6dgdnj4vgz",
+ "id": "clcueadzi00063b6sch7b1f32",
+ "title": "Name",
"blocks": [
{
"id": "cl1266bam00042e6dm0gn22vy",
@@ -40,47 +41,39 @@
],
"logicalOperator": "AND"
},
- "outgoingEdgeId": "cl12bk3j6000c2e69bak89ja9"
+ "outgoingEdgeId": "clcueadzi000l3b6smlf218u7"
}
],
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "outgoingEdgeId": "cl12bnfyd000g2e69g7lr3czq"
- }
- ],
- "title": "Group #1",
- "graphCoordinates": { "x": 266, "y": 162 }
- },
- {
- "id": "cl1267q1z000d2e6d949f2ge4",
- "blocks": [
+ "groupId": "clcueadzi00063b6sch7b1f32"
+ },
{
"id": "cl1267q2c000e2e6dynjeg83n",
"type": "text",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
"content": {
"html": "Welcome π
",
"richText": [
{ "type": "p", "children": [{ "text": "Welcome π" }] }
],
"plainText": "Welcome π"
- }
+ },
+ "groupId": "clcueadzi00063b6sch7b1f32"
},
{
"id": "cl1267y1u000f2e6d4rlglv6g",
"type": "text",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
"content": {
"html": "What's your name?
",
"richText": [
{ "type": "p", "children": [{ "text": "What's your name?" }] }
],
"plainText": "What's your name?"
- }
+ },
+ "groupId": "clcueadzi00063b6sch7b1f32"
},
{
"id": "cl126820m000g2e6dfleq78bt",
"type": "text input",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
+ "groupId": "clcueadzi00063b6sch7b1f32",
"options": {
"isLong": false,
"labels": {
@@ -88,41 +81,31 @@
"placeholder": "Type your answer..."
},
"variableId": "cl126f4hf000i2e6d8zvzc3t1"
- }
- },
- {
- "id": "cl1289y1s00142e6dvbkpvbje",
- "type": "Code",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
- "options": {
- "name": "Store Name in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeName\", content: {{Name}}}, \"*\")"
},
- "outgoingEdgeId": "cl12bk56s000d2e69oll3nqxm"
+ "outgoingEdgeId": "clcuecvjo000q3b6s42ouw3zz"
}
],
- "title": "Group #3",
- "graphCoordinates": { "x": 269, "y": 381 }
+ "graphCoordinates": { "x": 328.22861564828236, "y": -1.7421511890097776 }
},
{
- "id": "cl126ixoq000p2e6dfbz9sype",
+ "id": "clcueadzi00073b6sqz8n5vxp",
+ "title": "Company",
"blocks": [
{
"id": "cl1266v6f000a2e6db7wj3ux7",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Welcome {{Name}} π
",
"richText": [
{ "type": "p", "children": [{ "text": "Welcome {{Name}} π" }] }
],
"plainText": "Welcome {{Name}} π"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126hb9m000l2e6d5qk3mohn",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "I'm super pumped that you've decided to try out Typebot π
",
"richText": [
@@ -136,12 +119,12 @@
}
],
"plainText": "I'm super pumped that you've decided to try out Typebot π"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126hpw1000m2e6dneousygl",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "You are small steps away from meaningful, hyper-personalized experience for your users
",
"richText": [
@@ -155,12 +138,12 @@
}
],
"plainText": "You are small steps away from meaningful, hyper-personalized experience for your users"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126guhd000k2e6d6ypkex9z",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Let's get you set up for your Typebot journey.
",
"richText": [
@@ -172,12 +155,12 @@
}
],
"plainText": "Let's get you set up for your Typebot journey."
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126ixp9000q2e6dslh0zypi",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Do you work for a specific company?
",
"richText": [
@@ -187,7 +170,8 @@
}
],
"plainText": "Do you work for a specific company?"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126jb2q000r2e6dgqlnxnt8",
@@ -197,31 +181,23 @@
"id": "cl126jb2q000s2e6dm60yq5p2",
"type": 0,
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "content": "Yes",
- "outgoingEdgeId": "cl126jsoo000x2e6ditu7dgf8"
+ "content": "Yes"
},
{
"id": "cl126jc5a000t2e6dqv91w7j6",
"type": 0,
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
"content": "No",
- "outgoingEdgeId": "cl126l5tx00122e6dmisci6h5"
+ "outgoingEdgeId": "clcueadzi000f3b6sb7lxyeta"
}
],
- "groupId": "cl126ixoq000p2e6dfbz9sype",
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
"options": { "buttonLabel": "Send", "isMultipleChoice": false }
- }
- ],
- "title": "Group #5",
- "graphCoordinates": { "x": 614, "y": 244 }
- },
- {
- "id": "cl126jioj000u2e6dqssno3hv",
- "blocks": [
+ },
{
"id": "cl126jioz000v2e6dwrk1f2cb",
"type": "text input",
- "groupId": "cl126jioj000u2e6dqssno3hv",
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
"options": {
"isLong": false,
"labels": {
@@ -229,43 +205,34 @@
"placeholder": "Type the company name..."
},
"variableId": "cl126jqww000w2e6dq9yv4ifq"
- }
- },
- {
- "id": "cl12890kw00132e6dp9v5dexm",
- "type": "Code",
- "groupId": "cl126jioj000u2e6dqssno3hv",
- "options": {
- "name": "Store company in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeCompany\", content: {{Company}}}, \"*\")"
},
- "outgoingEdgeId": "cl128ag8i00162e6dufv3tgo0"
+ "outgoingEdgeId": "clcueb0cl000p3b6sisrc741n"
}
],
- "title": "Group #6",
- "graphCoordinates": { "x": 969, "y": 308 }
+ "graphCoordinates": { "x": 679.828061917379, "y": 3.351428911218571 }
},
{
- "id": "cl126krbp00102e6dnjelmfa1",
+ "id": "clcueadzi00093b6s82ivles8",
+ "title": "Bot category",
"blocks": [
{
"id": "cl126krck00112e6d1m6ctxpn",
"type": "text",
- "groupId": "cl126krbp00102e6dnjelmfa1",
"content": {
- "html": "What type of forms are you planning to build with Typebot?
",
+ "html": "What type of bots are you planning to build with Typebot?
",
"richText": [
{
"type": "p",
"children": [
{
- "text": "What type of forms are you planning to build with Typebot?"
+ "text": "What type of bots are you planning to build with Typebot?"
}
]
}
],
- "plainText": "What type of forms are you planning to build with Typebot?"
- }
+ "plainText": "What type of bots are you planning to build with Typebot?"
+ },
+ "groupId": "clcueadzi00093b6s82ivles8"
},
{
"id": "cl126lb8v00142e6duv5qe08l",
@@ -320,7 +287,7 @@
"content": "Other"
}
],
- "groupId": "cl126krbp00102e6dnjelmfa1",
+ "groupId": "clcueadzi00093b6s82ivles8",
"options": {
"variableId": "cl126mo3t001b2e6dvyi16bkd",
"buttonLabel": "Send",
@@ -328,26 +295,40 @@
}
},
{
- "id": "cl128ain900172e6d1osj4u90",
- "type": "Code",
- "groupId": "cl126krbp00102e6dnjelmfa1",
- "options": {
- "name": "Store categories in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeCategories\", content: {{Categories}}}, \"*\")"
- },
- "outgoingEdgeId": "cl128azam00182e6dct61k7v5"
+ "id": "cl1278gyk002w2e6d744eb87n",
+ "type": "Condition",
+ "items": [
+ {
+ "id": "cl1278gyk002x2e6dwmpzs3nf",
+ "type": 1,
+ "blockId": "cl1278gyk002w2e6d744eb87n",
+ "content": {
+ "comparisons": [
+ {
+ "id": "cl1278irq002y2e6dv4965diw",
+ "value": "Other",
+ "variableId": "cl126mo3t001b2e6dvyi16bkd",
+ "comparisonOperator": "Contains"
+ }
+ ],
+ "logicalOperator": "AND"
+ },
+ "outgoingEdgeId": "clcueadzi000g3b6sdb6o0xet"
+ }
+ ],
+ "groupId": "clcueadzi00093b6s82ivles8",
+ "outgoingEdgeId": "clcueadzi000h3b6shpxplygo"
}
],
- "title": "Group #6",
- "graphCoordinates": { "x": 1218, "y": 510 }
+ "graphCoordinates": { "x": 1030.2081982319628, "y": -0.2818258211374715 }
},
{
- "id": "cl126p75m001j2e6d73qmes0m",
+ "id": "clcueadzi000a3b6spk404zpz",
+ "title": "Bye",
"blocks": [
{
"id": "cl126p76d001k2e6dbhnf2ysq",
"type": "text",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"html": "Thank you for answering those questions!
",
"richText": [
@@ -359,29 +340,20 @@
}
],
"plainText": "Thank you for answering those questions!"
- }
- },
- {
- "id": "cl128375600112e6d4l0jtuyf",
- "type": "Code",
- "groupId": "cl126p75m001j2e6d73qmes0m",
- "options": {
- "name": "Shoot confettis",
- "content": "postMessage({from: \"typebot\", action: \"shootConfettis\"}, \"*\")"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl126rfy6001t2e6d21gcb6b0",
"type": "image",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"url": "https://media4.giphy.com/media/l0amJzVHIAfl7jMDos/giphy.gif?cid=fe3852a3i4c33635xdtj3nesr9uq4zteujaab6b0jr42gpxx&rid=giphy.gif&ct=g"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl126txta001y2e6dtxrbsnek",
"type": "text",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"html": "You can reach out to me using the contact bubble on the bottom right corner π€
",
"richText": [
@@ -395,11 +367,11 @@
}
],
"plainText": "You can reach out to me using the contact bubble on the bottom right corner π€"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl12buyly00172e6991bz38ch",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"type": "text",
"content": {
"html": "Let's create your first typebot...
",
@@ -410,91 +382,41 @@
}
],
"plainText": "Let's create your first typebot..."
- }
- },
- {
- "id": "cl12bwpi800182e69kcivnp1s",
- "groupId": "cl126p75m001j2e6d73qmes0m",
- "type": "Code",
- "options": {
- "name": "Go to typebot creation",
- "content": "setTimeout(() => {window.location.href = \"https://app.typebot.io/typebots/create?isFirstBot=true\"}, 4000)"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
}
],
- "title": "Group #7",
- "graphCoordinates": { "x": 1612, "y": 1103 }
+ "graphCoordinates": { "x": 1585.6402200792238, "y": 219.28927860860924 }
},
{
- "id": "cl126pv6w001n2e6dp0qkvthu",
+ "id": "clcueadzi000b3b6sv6936vs4",
+ "title": "Other category",
"blocks": [
{
"id": "cl127yxym000b2e6d9hksxo6h",
"type": "text",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
"content": {
"html": "What else?
",
"richText": [
{ "type": "p", "children": [{ "text": "What else?" }] }
],
"plainText": "What else?"
- }
+ },
+ "groupId": "clcueadzi000b3b6sv6936vs4"
},
{
"id": "cl126pv7n001o2e6dajltc4qz",
"type": "text input",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
+ "groupId": "clcueadzi000b3b6sv6936vs4",
"options": {
"isLong": false,
"labels": { "button": "Send", "placeholder": "Type your answer" },
"variableId": "cl126q38p001q2e6d0hj23f6b"
- }
- },
- {
- "id": "cl128b34o00192e6dqjxs3cxf",
- "type": "Code",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
- "options": {
- "name": "Store Other categories in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeOtherCategories\", content: {{Other categories}}}, \"*\")"
},
- "outgoingEdgeId": "cl128c0fu001a2e6droq69g6z"
+ "outgoingEdgeId": "clcuehrt2000s3b6skmk7rhje"
}
],
- "title": "Group #8",
- "graphCoordinates": { "x": 1943, "y": 895 }
- },
- {
- "id": "cl1278gx9002v2e6d4kf3v89s",
- "blocks": [
- {
- "id": "cl1278gyk002w2e6d744eb87n",
- "type": "Condition",
- "items": [
- {
- "id": "cl1278gyk002x2e6dwmpzs3nf",
- "type": 1,
- "blockId": "cl1278gyk002w2e6d744eb87n",
- "content": {
- "comparisons": [
- {
- "id": "cl1278irq002y2e6dv4965diw",
- "value": "Other",
- "variableId": "cl126mo3t001b2e6dvyi16bkd",
- "comparisonOperator": "Contains"
- }
- ],
- "logicalOperator": "AND"
- },
- "outgoingEdgeId": "cl1278r3b002z2e6d6d6rk9dh"
- }
- ],
- "groupId": "cl1278gx9002v2e6d4kf3v89s",
- "outgoingEdgeId": "cl1278trd00312e6dxmzhcmmn"
- }
- ],
- "title": "Group #13",
- "graphCoordinates": { "x": 1585, "y": 792 }
+ "graphCoordinates": { "x": 1369.6844213687823, "y": -7.90789096298402 }
}
],
"variables": [
@@ -505,99 +427,71 @@
],
"edges": [
{
- "id": "cl1266kt100082e6d1wks5dtp",
- "to": { "groupId": "cl1266bah00032e6dgdnj4vgz" },
- "from": {
- "blockId": "cl1265zct0001mb1afel460do",
- "groupId": "cl1265zct0000mb1a6bir36w7"
- }
- },
- {
- "id": "cl126jsoo000x2e6ditu7dgf8",
- "to": { "groupId": "cl126jioj000u2e6dqssno3hv" },
- "from": {
- "itemId": "cl126jb2q000s2e6dm60yq5p2",
- "blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "groupId": "cl126ixoq000p2e6dfbz9sype"
- }
- },
- {
- "id": "cl126l5tx00122e6dmisci6h5",
- "to": { "groupId": "cl126krbp00102e6dnjelmfa1" },
+ "id": "clcueadzi000f3b6sb7lxyeta",
+ "to": { "groupId": "clcueadzi00093b6s82ivles8" },
"from": {
"itemId": "cl126jc5a000t2e6dqv91w7j6",
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "groupId": "cl126ixoq000p2e6dfbz9sype"
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
}
},
{
- "id": "cl1278r3b002z2e6d6d6rk9dh",
- "to": { "groupId": "cl126pv6w001n2e6dp0qkvthu" },
+ "id": "clcueadzi000g3b6sdb6o0xet",
+ "to": { "groupId": "clcueadzi000b3b6sv6936vs4" },
"from": {
"itemId": "cl1278gyk002x2e6dwmpzs3nf",
"blockId": "cl1278gyk002w2e6d744eb87n",
- "groupId": "cl1278gx9002v2e6d4kf3v89s"
+ "groupId": "clcueadzi00093b6s82ivles8"
}
},
{
- "id": "cl1278trd00312e6dxmzhcmmn",
- "to": { "groupId": "cl126p75m001j2e6d73qmes0m" },
+ "id": "clcueadzi000h3b6shpxplygo",
+ "to": { "groupId": "clcueadzi000a3b6spk404zpz" },
"from": {
"blockId": "cl1278gyk002w2e6d744eb87n",
- "groupId": "cl1278gx9002v2e6d4kf3v89s"
+ "groupId": "clcueadzi00093b6s82ivles8"
}
},
{
- "id": "cl128ag8i00162e6dufv3tgo0",
- "to": { "groupId": "cl126krbp00102e6dnjelmfa1" },
+ "id": "clcueadzi000l3b6smlf218u7",
+ "to": { "groupId": "clcueadzi00073b6sqz8n5vxp" },
"from": {
- "blockId": "cl12890kw00132e6dp9v5dexm",
- "groupId": "cl126jioj000u2e6dqssno3hv"
- }
- },
- {
- "id": "cl128azam00182e6dct61k7v5",
- "to": { "groupId": "cl1278gx9002v2e6d4kf3v89s" },
- "from": {
- "blockId": "cl128ain900172e6d1osj4u90",
- "groupId": "cl126krbp00102e6dnjelmfa1"
+ "itemId": "cl1266bam00052e6dn1sdjnax",
+ "blockId": "cl1266bam00042e6dm0gn22vy",
+ "groupId": "clcueadzi00063b6sch7b1f32"
}
},
{
- "id": "cl128c0fu001a2e6droq69g6z",
- "to": { "groupId": "cl126p75m001j2e6d73qmes0m" },
"from": {
- "blockId": "cl128b34o00192e6dqjxs3cxf",
- "groupId": "cl126pv6w001n2e6dp0qkvthu"
- }
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
+ "blockId": "cl126jioz000v2e6dwrk1f2cb"
+ },
+ "to": { "groupId": "clcueadzi00093b6s82ivles8" },
+ "id": "clcueb0cl000p3b6sisrc741n"
},
{
"from": {
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "blockId": "cl1266bam00042e6dm0gn22vy",
- "itemId": "cl1266bam00052e6dn1sdjnax"
+ "groupId": "clcueadzi00063b6sch7b1f32",
+ "blockId": "cl126820m000g2e6dfleq78bt"
},
- "to": { "groupId": "cl126ixoq000p2e6dfbz9sype" },
- "id": "cl12bk3j6000c2e69bak89ja9"
+ "to": { "groupId": "clcueadzi00073b6sqz8n5vxp" },
+ "id": "clcuecvjo000q3b6s42ouw3zz"
},
{
"from": {
- "groupId": "cl1267q1z000d2e6d949f2ge4",
- "blockId": "cl1289y1s00142e6dvbkpvbje"
- },
- "to": {
- "groupId": "cl126ixoq000p2e6dfbz9sype",
- "blockId": "cl126hb9m000l2e6d5qk3mohn"
+ "groupId": "clcueadzi00043b6s1r8wnql8",
+ "blockId": "cl1265zct0001mb1afel460do"
},
- "id": "cl12bk56s000d2e69oll3nqxm"
+ "to": { "groupId": "clcueadzi00063b6sch7b1f32" },
+ "id": "clcuefdfv000r3b6sqzv3prz3"
},
{
"from": {
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "blockId": "cl1266bam00042e6dm0gn22vy"
+ "groupId": "clcueadzi000b3b6sv6936vs4",
+ "blockId": "cl126pv7n001o2e6dajltc4qz"
},
- "to": { "groupId": "cl1267q1z000d2e6d949f2ge4" },
- "id": "cl12bnfyd000g2e69g7lr3czq"
+ "to": { "groupId": "clcueadzi000a3b6spk404zpz" },
+ "id": "clcuehrt2000s3b6skmk7rhje"
}
],
"theme": {
@@ -632,6 +526,10 @@
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
- "publicId": "typebot-onboarding",
- "customDomain": null
+ "publicId": null,
+ "customDomain": null,
+ "workspaceId": "proWorkspace",
+ "resultsTablePreferences": null,
+ "isArchived": false,
+ "isClosed": false
}
diff --git a/apps/builder/public/bots/onboarding.json b/apps/builder/public/bots/onboarding.json
index 72a10ad068..05f9917f84 100644
--- a/apps/builder/public/bots/onboarding.json
+++ b/apps/builder/public/bots/onboarding.json
@@ -6,21 +6,22 @@
"folderId": null,
"groups": [
{
- "id": "cl1265zct0000mb1a6bir36w7",
+ "id": "clcueadzi00043b6s1r8wnql8",
+ "title": "Start",
"blocks": [
{
"id": "cl1265zct0001mb1afel460do",
"type": "start",
"label": "Start",
- "groupId": "cl1265zct0000mb1a6bir36w7",
- "outgoingEdgeId": "cl1266kt100082e6d1wks5dtp"
+ "groupId": "clcueadzi00043b6s1r8wnql8",
+ "outgoingEdgeId": "clcuefdfv000r3b6sqzv3prz3"
}
],
- "title": "Start",
"graphCoordinates": { "x": 0, "y": 0 }
},
{
- "id": "cl1266bah00032e6dgdnj4vgz",
+ "id": "clcueadzi00063b6sch7b1f32",
+ "title": "Name",
"blocks": [
{
"id": "cl1266bam00042e6dm0gn22vy",
@@ -40,47 +41,39 @@
],
"logicalOperator": "AND"
},
- "outgoingEdgeId": "cl12bk3j6000c2e69bak89ja9"
+ "outgoingEdgeId": "clcueadzi000l3b6smlf218u7"
}
],
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "outgoingEdgeId": "cl12bnfyd000g2e69g7lr3czq"
- }
- ],
- "title": "Group #1",
- "graphCoordinates": { "x": 266, "y": 162 }
- },
- {
- "id": "cl1267q1z000d2e6d949f2ge4",
- "blocks": [
+ "groupId": "clcueadzi00063b6sch7b1f32"
+ },
{
"id": "cl1267q2c000e2e6dynjeg83n",
"type": "text",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
"content": {
"html": "Welcome π
",
"richText": [
{ "type": "p", "children": [{ "text": "Welcome π" }] }
],
"plainText": "Welcome π"
- }
+ },
+ "groupId": "clcueadzi00063b6sch7b1f32"
},
{
"id": "cl1267y1u000f2e6d4rlglv6g",
"type": "text",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
"content": {
"html": "What's your name?
",
"richText": [
{ "type": "p", "children": [{ "text": "What's your name?" }] }
],
"plainText": "What's your name?"
- }
+ },
+ "groupId": "clcueadzi00063b6sch7b1f32"
},
{
"id": "cl126820m000g2e6dfleq78bt",
"type": "text input",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
+ "groupId": "clcueadzi00063b6sch7b1f32",
"options": {
"isLong": false,
"labels": {
@@ -88,41 +81,31 @@
"placeholder": "Type your answer..."
},
"variableId": "cl126f4hf000i2e6d8zvzc3t1"
- }
- },
- {
- "id": "cl1289y1s00142e6dvbkpvbje",
- "type": "Code",
- "groupId": "cl1267q1z000d2e6d949f2ge4",
- "options": {
- "name": "Store Name in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeName\", content: {{Name}}}, \"*\")"
},
- "outgoingEdgeId": "cl12bk56s000d2e69oll3nqxm"
+ "outgoingEdgeId": "clcuecvjo000q3b6s42ouw3zz"
}
],
- "title": "Group #3",
- "graphCoordinates": { "x": 269, "y": 381 }
+ "graphCoordinates": { "x": 328.22861564828236, "y": -1.7421511890097776 }
},
{
- "id": "cl126ixoq000p2e6dfbz9sype",
+ "id": "clcueadzi00073b6sqz8n5vxp",
+ "title": "Company",
"blocks": [
{
"id": "cl1266v6f000a2e6db7wj3ux7",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Welcome {{Name}} π
",
"richText": [
{ "type": "p", "children": [{ "text": "Welcome {{Name}} π" }] }
],
"plainText": "Welcome {{Name}} π"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126hb9m000l2e6d5qk3mohn",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "I'm super pumped that you've decided to try out Typebot π
",
"richText": [
@@ -136,12 +119,12 @@
}
],
"plainText": "I'm super pumped that you've decided to try out Typebot π"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126hpw1000m2e6dneousygl",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "You are small steps away from meaningful, hyper-personalized experience for your users
",
"richText": [
@@ -155,12 +138,12 @@
}
],
"plainText": "You are small steps away from meaningful, hyper-personalized experience for your users"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126guhd000k2e6d6ypkex9z",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Let's get you set up for your Typebot journey.
",
"richText": [
@@ -172,12 +155,12 @@
}
],
"plainText": "Let's get you set up for your Typebot journey."
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126ixp9000q2e6dslh0zypi",
"type": "text",
- "groupId": "cl126ixoq000p2e6dfbz9sype",
"content": {
"html": "Do you work for a specific company?
",
"richText": [
@@ -187,7 +170,8 @@
}
],
"plainText": "Do you work for a specific company?"
- }
+ },
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
},
{
"id": "cl126jb2q000r2e6dgqlnxnt8",
@@ -197,31 +181,23 @@
"id": "cl126jb2q000s2e6dm60yq5p2",
"type": 0,
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "content": "Yes",
- "outgoingEdgeId": "cl126jsoo000x2e6ditu7dgf8"
+ "content": "Yes"
},
{
"id": "cl126jc5a000t2e6dqv91w7j6",
"type": 0,
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
"content": "No",
- "outgoingEdgeId": "cl126l5tx00122e6dmisci6h5"
+ "outgoingEdgeId": "clcueadzi000f3b6sb7lxyeta"
}
],
- "groupId": "cl126ixoq000p2e6dfbz9sype",
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
"options": { "buttonLabel": "Send", "isMultipleChoice": false }
- }
- ],
- "title": "Group #5",
- "graphCoordinates": { "x": 614, "y": 244 }
- },
- {
- "id": "cl126jioj000u2e6dqssno3hv",
- "blocks": [
+ },
{
"id": "cl126jioz000v2e6dwrk1f2cb",
"type": "text input",
- "groupId": "cl126jioj000u2e6dqssno3hv",
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
"options": {
"isLong": false,
"labels": {
@@ -229,43 +205,34 @@
"placeholder": "Type the company name..."
},
"variableId": "cl126jqww000w2e6dq9yv4ifq"
- }
- },
- {
- "id": "cl12890kw00132e6dp9v5dexm",
- "type": "Code",
- "groupId": "cl126jioj000u2e6dqssno3hv",
- "options": {
- "name": "Store company in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeCompany\", content: {{Company}}}, \"*\")"
},
- "outgoingEdgeId": "cl128ag8i00162e6dufv3tgo0"
+ "outgoingEdgeId": "clcueb0cl000p3b6sisrc741n"
}
],
- "title": "Group #6",
- "graphCoordinates": { "x": 969, "y": 308 }
+ "graphCoordinates": { "x": 679.828061917379, "y": 3.351428911218571 }
},
{
- "id": "cl126krbp00102e6dnjelmfa1",
+ "id": "clcueadzi00093b6s82ivles8",
+ "title": "Bot category",
"blocks": [
{
"id": "cl126krck00112e6d1m6ctxpn",
"type": "text",
- "groupId": "cl126krbp00102e6dnjelmfa1",
"content": {
- "html": "What type of forms are you planning to build with Typebot?
",
+ "html": "What type of bots are you planning to build with Typebot?
",
"richText": [
{
"type": "p",
"children": [
{
- "text": "What type of forms are you planning to build with Typebot?"
+ "text": "What type of bots are you planning to build with Typebot?"
}
]
}
],
- "plainText": "What type of forms are you planning to build with Typebot?"
- }
+ "plainText": "What type of bots are you planning to build with Typebot?"
+ },
+ "groupId": "clcueadzi00093b6s82ivles8"
},
{
"id": "cl126lb8v00142e6duv5qe08l",
@@ -320,7 +287,7 @@
"content": "Other"
}
],
- "groupId": "cl126krbp00102e6dnjelmfa1",
+ "groupId": "clcueadzi00093b6s82ivles8",
"options": {
"variableId": "cl126mo3t001b2e6dvyi16bkd",
"buttonLabel": "Send",
@@ -328,26 +295,40 @@
}
},
{
- "id": "cl128ain900172e6d1osj4u90",
- "type": "Code",
- "groupId": "cl126krbp00102e6dnjelmfa1",
- "options": {
- "name": "Store categories in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeCategories\", content: {{Categories}}}, \"*\")"
- },
- "outgoingEdgeId": "cl128azam00182e6dct61k7v5"
+ "id": "cl1278gyk002w2e6d744eb87n",
+ "type": "Condition",
+ "items": [
+ {
+ "id": "cl1278gyk002x2e6dwmpzs3nf",
+ "type": 1,
+ "blockId": "cl1278gyk002w2e6d744eb87n",
+ "content": {
+ "comparisons": [
+ {
+ "id": "cl1278irq002y2e6dv4965diw",
+ "value": "Other",
+ "variableId": "cl126mo3t001b2e6dvyi16bkd",
+ "comparisonOperator": "Contains"
+ }
+ ],
+ "logicalOperator": "AND"
+ },
+ "outgoingEdgeId": "clcueadzi000g3b6sdb6o0xet"
+ }
+ ],
+ "groupId": "clcueadzi00093b6s82ivles8",
+ "outgoingEdgeId": "clcueadzi000h3b6shpxplygo"
}
],
- "title": "Group #6",
- "graphCoordinates": { "x": 1218, "y": 510 }
+ "graphCoordinates": { "x": 1030.2081982319628, "y": -0.2818258211374715 }
},
{
- "id": "cl126p75m001j2e6d73qmes0m",
+ "id": "clcueadzi000a3b6spk404zpz",
+ "title": "Bye",
"blocks": [
{
"id": "cl126p76d001k2e6dbhnf2ysq",
"type": "text",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"html": "Thank you for answering those questions!
",
"richText": [
@@ -359,29 +340,20 @@
}
],
"plainText": "Thank you for answering those questions!"
- }
- },
- {
- "id": "cl128375600112e6d4l0jtuyf",
- "type": "Code",
- "groupId": "cl126p75m001j2e6d73qmes0m",
- "options": {
- "name": "Shoot confettis",
- "content": "postMessage({from: \"typebot\", action: \"shootConfettis\"}, \"*\")"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl126rfy6001t2e6d21gcb6b0",
"type": "image",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"url": "https://media4.giphy.com/media/l0amJzVHIAfl7jMDos/giphy.gif?cid=fe3852a3i4c33635xdtj3nesr9uq4zteujaab6b0jr42gpxx&rid=giphy.gif&ct=g"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl126txta001y2e6dtxrbsnek",
"type": "text",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"content": {
"html": "You can reach out to me using the contact bubble on the bottom right corner π€
",
"richText": [
@@ -395,11 +367,11 @@
}
],
"plainText": "You can reach out to me using the contact bubble on the bottom right corner π€"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
},
{
"id": "cl12buyly00172e6991bz38ch",
- "groupId": "cl126p75m001j2e6d73qmes0m",
"type": "text",
"content": {
"html": "Let's create your first typebot...
",
@@ -410,91 +382,41 @@
}
],
"plainText": "Let's create your first typebot..."
- }
- },
- {
- "id": "cl12bwpi800182e69kcivnp1s",
- "groupId": "cl126p75m001j2e6d73qmes0m",
- "type": "Code",
- "options": {
- "name": "Go to typebot creation",
- "content": "setTimeout(() => {window.location.href = \"https://app.typebot.io/typebots/create?isFirstBot=true\"}, 4000)"
- }
+ },
+ "groupId": "clcueadzi000a3b6spk404zpz"
}
],
- "title": "Group #7",
- "graphCoordinates": { "x": 1612, "y": 1103 }
+ "graphCoordinates": { "x": 1585.6402200792238, "y": 219.28927860860924 }
},
{
- "id": "cl126pv6w001n2e6dp0qkvthu",
+ "id": "clcueadzi000b3b6sv6936vs4",
+ "title": "Other category",
"blocks": [
{
"id": "cl127yxym000b2e6d9hksxo6h",
"type": "text",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
"content": {
"html": "What else?
",
"richText": [
{ "type": "p", "children": [{ "text": "What else?" }] }
],
"plainText": "What else?"
- }
+ },
+ "groupId": "clcueadzi000b3b6sv6936vs4"
},
{
"id": "cl126pv7n001o2e6dajltc4qz",
"type": "text input",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
+ "groupId": "clcueadzi000b3b6sv6936vs4",
"options": {
"isLong": false,
"labels": { "button": "Send", "placeholder": "Type your answer" },
"variableId": "cl126q38p001q2e6d0hj23f6b"
- }
- },
- {
- "id": "cl128b34o00192e6dqjxs3cxf",
- "type": "Code",
- "groupId": "cl126pv6w001n2e6dp0qkvthu",
- "options": {
- "name": "Store Other categories in DB",
- "content": "postMessage({from: \"typebot\", action: \"storeOtherCategories\", content: {{Other categories}}}, \"*\")"
},
- "outgoingEdgeId": "cl128c0fu001a2e6droq69g6z"
+ "outgoingEdgeId": "clcuehrt2000s3b6skmk7rhje"
}
],
- "title": "Group #8",
- "graphCoordinates": { "x": 1943, "y": 895 }
- },
- {
- "id": "cl1278gx9002v2e6d4kf3v89s",
- "blocks": [
- {
- "id": "cl1278gyk002w2e6d744eb87n",
- "type": "Condition",
- "items": [
- {
- "id": "cl1278gyk002x2e6dwmpzs3nf",
- "type": 1,
- "blockId": "cl1278gyk002w2e6d744eb87n",
- "content": {
- "comparisons": [
- {
- "id": "cl1278irq002y2e6dv4965diw",
- "value": "Other",
- "variableId": "cl126mo3t001b2e6dvyi16bkd",
- "comparisonOperator": "Contains"
- }
- ],
- "logicalOperator": "AND"
- },
- "outgoingEdgeId": "cl1278r3b002z2e6d6d6rk9dh"
- }
- ],
- "groupId": "cl1278gx9002v2e6d4kf3v89s",
- "outgoingEdgeId": "cl1278trd00312e6dxmzhcmmn"
- }
- ],
- "title": "Group #13",
- "graphCoordinates": { "x": 1585, "y": 792 }
+ "graphCoordinates": { "x": 1369.6844213687823, "y": -7.90789096298402 }
}
],
"variables": [
@@ -505,99 +427,71 @@
],
"edges": [
{
- "id": "cl1266kt100082e6d1wks5dtp",
- "to": { "groupId": "cl1266bah00032e6dgdnj4vgz" },
- "from": {
- "blockId": "cl1265zct0001mb1afel460do",
- "groupId": "cl1265zct0000mb1a6bir36w7"
- }
- },
- {
- "id": "cl126jsoo000x2e6ditu7dgf8",
- "to": { "groupId": "cl126jioj000u2e6dqssno3hv" },
- "from": {
- "itemId": "cl126jb2q000s2e6dm60yq5p2",
- "blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "groupId": "cl126ixoq000p2e6dfbz9sype"
- }
- },
- {
- "id": "cl126l5tx00122e6dmisci6h5",
- "to": { "groupId": "cl126krbp00102e6dnjelmfa1" },
+ "id": "clcueadzi000f3b6sb7lxyeta",
+ "to": { "groupId": "clcueadzi00093b6s82ivles8" },
"from": {
"itemId": "cl126jc5a000t2e6dqv91w7j6",
"blockId": "cl126jb2q000r2e6dgqlnxnt8",
- "groupId": "cl126ixoq000p2e6dfbz9sype"
+ "groupId": "clcueadzi00073b6sqz8n5vxp"
}
},
{
- "id": "cl1278r3b002z2e6d6d6rk9dh",
- "to": { "groupId": "cl126pv6w001n2e6dp0qkvthu" },
+ "id": "clcueadzi000g3b6sdb6o0xet",
+ "to": { "groupId": "clcueadzi000b3b6sv6936vs4" },
"from": {
"itemId": "cl1278gyk002x2e6dwmpzs3nf",
"blockId": "cl1278gyk002w2e6d744eb87n",
- "groupId": "cl1278gx9002v2e6d4kf3v89s"
+ "groupId": "clcueadzi00093b6s82ivles8"
}
},
{
- "id": "cl1278trd00312e6dxmzhcmmn",
- "to": { "groupId": "cl126p75m001j2e6d73qmes0m" },
+ "id": "clcueadzi000h3b6shpxplygo",
+ "to": { "groupId": "clcueadzi000a3b6spk404zpz" },
"from": {
"blockId": "cl1278gyk002w2e6d744eb87n",
- "groupId": "cl1278gx9002v2e6d4kf3v89s"
- }
- },
- {
- "id": "cl128ag8i00162e6dufv3tgo0",
- "to": { "groupId": "cl126krbp00102e6dnjelmfa1" },
- "from": {
- "blockId": "cl12890kw00132e6dp9v5dexm",
- "groupId": "cl126jioj000u2e6dqssno3hv"
+ "groupId": "clcueadzi00093b6s82ivles8"
}
},
{
- "id": "cl128azam00182e6dct61k7v5",
- "to": { "groupId": "cl1278gx9002v2e6d4kf3v89s" },
+ "id": "clcueadzi000l3b6smlf218u7",
+ "to": { "groupId": "clcueadzi00073b6sqz8n5vxp" },
"from": {
- "blockId": "cl128ain900172e6d1osj4u90",
- "groupId": "cl126krbp00102e6dnjelmfa1"
+ "itemId": "cl1266bam00052e6dn1sdjnax",
+ "blockId": "cl1266bam00042e6dm0gn22vy",
+ "groupId": "clcueadzi00063b6sch7b1f32"
}
},
{
- "id": "cl128c0fu001a2e6droq69g6z",
- "to": { "groupId": "cl126p75m001j2e6d73qmes0m" },
"from": {
- "blockId": "cl128b34o00192e6dqjxs3cxf",
- "groupId": "cl126pv6w001n2e6dp0qkvthu"
- }
+ "groupId": "clcueadzi00073b6sqz8n5vxp",
+ "blockId": "cl126jioz000v2e6dwrk1f2cb"
+ },
+ "to": { "groupId": "clcueadzi00093b6s82ivles8" },
+ "id": "clcueb0cl000p3b6sisrc741n"
},
{
"from": {
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "blockId": "cl1266bam00042e6dm0gn22vy",
- "itemId": "cl1266bam00052e6dn1sdjnax"
+ "groupId": "clcueadzi00063b6sch7b1f32",
+ "blockId": "cl126820m000g2e6dfleq78bt"
},
- "to": { "groupId": "cl126ixoq000p2e6dfbz9sype" },
- "id": "cl12bk3j6000c2e69bak89ja9"
+ "to": { "groupId": "clcueadzi00073b6sqz8n5vxp" },
+ "id": "clcuecvjo000q3b6s42ouw3zz"
},
{
"from": {
- "groupId": "cl1267q1z000d2e6d949f2ge4",
- "blockId": "cl1289y1s00142e6dvbkpvbje"
- },
- "to": {
- "groupId": "cl126ixoq000p2e6dfbz9sype",
- "blockId": "cl126hb9m000l2e6d5qk3mohn"
+ "groupId": "clcueadzi00043b6s1r8wnql8",
+ "blockId": "cl1265zct0001mb1afel460do"
},
- "id": "cl12bk56s000d2e69oll3nqxm"
+ "to": { "groupId": "clcueadzi00063b6sch7b1f32" },
+ "id": "clcuefdfv000r3b6sqzv3prz3"
},
{
"from": {
- "groupId": "cl1266bah00032e6dgdnj4vgz",
- "blockId": "cl1266bam00042e6dm0gn22vy"
+ "groupId": "clcueadzi000b3b6sv6936vs4",
+ "blockId": "cl126pv7n001o2e6dajltc4qz"
},
- "to": { "groupId": "cl1267q1z000d2e6d949f2ge4" },
- "id": "cl12bnfyd000g2e69g7lr3czq"
+ "to": { "groupId": "clcueadzi000a3b6spk404zpz" },
+ "id": "clcuehrt2000s3b6skmk7rhje"
}
],
"theme": {
@@ -608,12 +502,12 @@
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
- "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
- "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" },
"hostAvatar": {
- "isEnabled": true,
- "url": "https://s3.eu-west-3.amazonaws.com/typebot/typebots/ckzp7a2za005809lczf2knzix/273013187_1315820332248257_6244778509534754615_n.jpg"
- }
+ "url": "https://github.com/avatars/u/16015833?v=4",
+ "isEnabled": true
+ },
+ "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+ "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": {
"font": "Open Sans",
@@ -631,6 +525,10 @@
},
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
- "publicId": "typebot-onboarding",
- "customDomain": null
+ "publicId": null,
+ "customDomain": null,
+ "workspaceId": "proWorkspace",
+ "resultsTablePreferences": null,
+ "isArchived": false,
+ "isClosed": false
}
diff --git a/apps/builder/public/templates/faq.json b/apps/builder/public/templates/faq.json
index 0a0160b036..8922485a1d 100644
--- a/apps/builder/public/templates/faq.json
+++ b/apps/builder/public/templates/faq.json
@@ -557,7 +557,7 @@
},
"settings": {
"general": {
- "isBrandingEnabled": false,
+ "isBrandingEnabled": true,
"isInputPrefillEnabled": true,
"isHideQueryParamsEnabled": true,
"isNewResultOnRefreshEnabled": false
diff --git a/apps/builder/public/templates/lead-gen.json b/apps/builder/public/templates/lead-gen.json
index 555a596764..82993dd34e 100644
--- a/apps/builder/public/templates/lead-gen.json
+++ b/apps/builder/public/templates/lead-gen.json
@@ -337,7 +337,10 @@
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
- "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+ "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" },
+ "hostAvatar": {
+ "isEnabled": true
+ }
},
"general": {
"font": "Open Sans",
diff --git a/apps/builder/src/assets/styles/codeMirror.css b/apps/builder/src/assets/styles/codeMirror.css
deleted file mode 100644
index e88793c6fd..0000000000
--- a/apps/builder/src/assets/styles/codeMirror.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.cm-editor {
- outline: 0px solid transparent !important;
- height: 100%;
- border-radius: 0.25rem;
-}
-
-.cm-scroller {
- border-radius: 5px;
-}
diff --git a/apps/builder/src/components/CodeEditor.tsx b/apps/builder/src/components/CodeEditor.tsx
index 2b2da9f969..4f79f790ee 100644
--- a/apps/builder/src/components/CodeEditor.tsx
+++ b/apps/builder/src/components/CodeEditor.tsx
@@ -1,29 +1,26 @@
import {
- Box,
BoxProps,
+ Fade,
HStack,
- useColorMode,
useColorModeValue,
+ useDisclosure,
} from '@chakra-ui/react'
-import { EditorView, basicSetup } from 'codemirror'
-import { EditorState } from '@codemirror/state'
-import { json, jsonParseLinter } from '@codemirror/lang-json'
-import { css } from '@codemirror/lang-css'
-import { javascript } from '@codemirror/lang-javascript'
-import { html } from '@codemirror/lang-html'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'
-import { linter, LintSource } from '@codemirror/lint'
import { VariablesButton } from '@/features/variables'
import { Variable } from 'models'
import { env } from 'utils'
-
-const linterExtension = linter(jsonParseLinter() as unknown as LintSource)
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'
+import { githubLight } from '@uiw/codemirror-theme-github'
+import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs'
+import { isDefined } from '@udecode/plate-common'
+import { CopyButton } from './CopyButton'
type Props = {
- value: string
- lang?: 'css' | 'json' | 'js' | 'html'
+ value?: string
+ defaultValue?: string
+ lang: LanguageName
isReadOnly?: boolean
debounceTimeout?: number
withVariableButton?: boolean
@@ -31,7 +28,7 @@ type Props = {
onChange?: (value: string) => void
}
export const CodeEditor = ({
- value,
+ defaultValue,
lang,
onChange,
height = '250px',
@@ -40,91 +37,25 @@ export const CodeEditor = ({
debounceTimeout = 1000,
...props
}: Props & Omit) => {
- const isDark = useColorMode().colorMode === 'dark'
- const editorContainer = useRef(null)
- const editorView = useRef(null)
- const [, setPlainTextValue] = useState(value)
+ const theme = useColorModeValue(githubLight, tokyoNight)
+ const codeEditor = useRef(null)
const [carretPosition, setCarretPosition] = useState(0)
const isVariableButtonDisplayed = withVariableButton && !isReadOnly
+ const [value, _setValue] = useState(defaultValue ?? '')
+ const { onOpen, onClose, isOpen } = useDisclosure()
- const debounced = useDebouncedCallback(
+ const setValue = useDebouncedCallback(
(value) => {
- setPlainTextValue(value)
+ _setValue(value)
onChange && onChange(value)
},
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
- useEffect(
- () => () => {
- debounced.flush()
- },
- [debounced]
- )
-
- useEffect(() => {
- if (!editorView.current || !isReadOnly) return
- editorView.current.dispatch({
- changes: {
- from: 0,
- to: editorView.current.state.doc.length,
- insert: value,
- },
- })
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [value])
-
- useEffect(() => {
- const editor = initEditor(value)
- return () => {
- editor?.destroy()
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
-
- const initEditor = (value: string) => {
- if (!editorContainer.current) return
- const updateListenerExtension = EditorView.updateListener.of((update) => {
- if (update.docChanged && onChange)
- debounced(update.state.doc.toJSON().join('\n'))
- })
- const extensions = [
- updateListenerExtension,
- basicSetup,
- EditorState.readOnly.of(isReadOnly),
- ]
- if (isDark) extensions.push(oneDark)
- if (lang === 'json') {
- extensions.push(json())
- extensions.push(linterExtension)
- }
- if (lang === 'css') extensions.push(css())
- if (lang === 'js') extensions.push(javascript())
- if (lang === 'html') extensions.push(html())
- extensions.push(
- EditorView.theme({
- '&': { maxHeight: '500px' },
- '.cm-gutter,.cm-content': { minHeight: isReadOnly ? '0' : height },
- '.cm-scroller': { overflow: 'auto' },
- })
- )
- const editor = new EditorView({
- state: EditorState.create({
- extensions,
- }),
- parent: editorContainer.current,
- })
- editor.dispatch({
- changes: { from: 0, insert: value },
- })
- editorView.current = editor
- return editor
- }
-
const handleVariableSelected = (variable?: Pick) => {
- editorView.current?.focus()
+ codeEditor.current?.view?.focus()
const insert = `{{${variable?.name}}}`
- editorView.current?.dispatch({
+ codeEditor.current?.view?.dispatch({
changes: {
from: carretPosition,
insert,
@@ -133,9 +64,10 @@ export const CodeEditor = ({
})
}
- const handleKeyUp = () => {
- if (!editorContainer.current) return
- setCarretPosition(editorView.current?.state.selection.main.from ?? 0)
+ const handleChange = (newValue: string) => {
+ if (isDefined(props.value)) return
+ setValue(newValue)
+ setCarretPosition(codeEditor.current?.state?.selection.main.head ?? 0)
}
return (
@@ -143,19 +75,61 @@ export const CodeEditor = ({
align="flex-end"
spacing={0}
borderWidth={'1px'}
- borderRadius="md"
- bg={useColorModeValue('#FCFCFC', '#282C34')}
+ rounded="md"
+ bg={useColorModeValue('white', '#1A1B26')}
+ width="full"
+ h="full"
+ pos="relative"
+ onMouseEnter={onOpen}
+ onMouseLeave={onClose}
+ sx={{
+ '& .cm-editor': {
+ maxH: '70vh',
+ outline: '0px solid transparent !important',
+ rounded: 'md',
+ },
+ '& .cm-scroller': {
+ rounded: 'md',
+ overflow: 'auto',
+ },
+ '& .cm-gutter,.cm-content': {
+ minH: isReadOnly ? '0' : height,
+ },
+ '& .ΝΌ1 .cm-scroller': {
+ fontSize: '14px',
+ fontFamily:
+ 'JetBrainsMono, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+ },
+ }}
>
-
{isVariableButtonDisplayed && (
)}
+ {isReadOnly && (
+
+
+
+ )}
)
}
diff --git a/apps/builder/src/components/ColorPicker.tsx b/apps/builder/src/components/ColorPicker.tsx
index 0fa336fd03..cc06b0c6ae 100644
--- a/apps/builder/src/components/ColorPicker.tsx
+++ b/apps/builder/src/components/ColorPicker.tsx
@@ -29,12 +29,12 @@ const colorsSelection: `#${string}`[] = [
]
type Props = {
- initialColor: string
+ initialColor?: string
onColorChange: (color: string) => void
}
export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
- const [color, setColor] = useState(initialColor)
+ const [color, setColor] = useState(initialColor ?? '')
useEffect(() => {
onColorChange(color)
diff --git a/apps/builder/src/components/Seo.tsx b/apps/builder/src/components/Seo.tsx
index 0a2d769065..599547a7bd 100644
--- a/apps/builder/src/components/Seo.tsx
+++ b/apps/builder/src/components/Seo.tsx
@@ -2,7 +2,6 @@ import Head from 'next/head'
export const Seo = ({
title,
- currentUrl = 'https://app.typebot.io',
description = 'Create and publish conversational forms that collect 4 times more answers and feel native to your product',
imagePreviewUrl = 'https://app.typebot.io/site-preview.png',
}: {
@@ -20,9 +19,6 @@ export const Seo = ({
-
-
-
diff --git a/apps/builder/src/components/SupportBubble.tsx b/apps/builder/src/components/SupportBubble.tsx
index 55bd4b2c4b..faa2b8f2a2 100644
--- a/apps/builder/src/components/SupportBubble.tsx
+++ b/apps/builder/src/components/SupportBubble.tsx
@@ -1,43 +1,35 @@
import { useTypebot } from '@/features/editor'
import { useUser } from '@/features/account'
import { useWorkspace } from '@/features/workspace'
-import React, { useEffect, useState } from 'react'
-import { initBubble } from 'typebot-js'
-import { isCloudProdInstance } from '@/utils/helpers'
+import React from 'react'
+import { Bubble } from '@typebot.io/react'
import { planToReadable } from '@/features/billing'
+import { isCloudProdInstance } from '@/utils/helpers'
export const SupportBubble = () => {
const { typebot } = useTypebot()
const { user } = useUser()
const { workspace } = useWorkspace()
- const [localTypebotId, setLocalTypebotId] = useState(typebot?.id)
- const [localUserId, setLocalUserId] = useState(user?.id)
- useEffect(() => {
- if (
- isCloudProdInstance &&
- (localTypebotId !== typebot?.id || localUserId !== user?.id)
- ) {
- setLocalTypebotId(typebot?.id)
- setLocalUserId(user?.id)
- initBubble({
- url: `https://viewer.typebot.io/typebot-support`,
- backgroundColor: '#ffffff',
- button: {
- color: '#0042DA',
- },
- hiddenVariables: {
- 'User ID': user?.id,
- 'First name': user?.name?.split(' ')[0] ?? undefined,
- Email: user?.email ?? undefined,
- 'Typebot ID': typebot?.id,
- 'Avatar URL': user?.image ?? undefined,
- Plan: planToReadable(workspace?.plan),
- },
- })
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [user, typebot])
+ if (!isCloudProdInstance) return null
- return <>
+ return (
+
+ )
}
diff --git a/apps/builder/src/components/inputs/SmartNumberInput.tsx b/apps/builder/src/components/inputs/SmartNumberInput.tsx
index 9a37b5316c..3afd7f6506 100644
--- a/apps/builder/src/components/inputs/SmartNumberInput.tsx
+++ b/apps/builder/src/components/inputs/SmartNumberInput.tsx
@@ -93,6 +93,7 @@ export const SmartNumberInput = ({
as={HStack}
isRequired={isRequired}
justifyContent="space-between"
+ width={label ? 'full' : 'auto'}
>
{label && (
diff --git a/apps/builder/src/features/auth/constants.ts b/apps/builder/src/features/auth/constants.ts
index 68ad70e92f..c183e2afd7 100644
--- a/apps/builder/src/features/auth/constants.ts
+++ b/apps/builder/src/features/auth/constants.ts
@@ -5,12 +5,12 @@ export const mockedUser: User = {
name: 'John Doe',
email: 'user@email.com',
company: null,
- createdAt: new Date(),
+ createdAt: new Date('2022-01-01'),
emailVerified: null,
graphNavigation: 'TRACKPAD',
preferredAppAppearance: null,
image: 'https://github.com/avatars/u/16015833?v=4',
- lastActivityAt: new Date(),
+ lastActivityAt: new Date('2022-01-01'),
onboardingCategories: [],
- updatedAt: new Date(),
+ updatedAt: new Date('2022-01-01'),
}
diff --git a/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts b/apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts
index 840ed19ce4..421d134aef 100644
--- 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')
)
diff --git a/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts b/apps/builder/src/features/blocks/bubbles/embed/embed.spec.ts
index 580a7225cf..65df373201 100644
--- 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
+ )
})
})
})
diff --git a/apps/builder/src/features/blocks/bubbles/image/image.spec.ts b/apps/builder/src/features/blocks/bubbles/image/image.spec.ts
index 119fd089b0..3df5c5cfee 100644
--- 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)
})
})
})
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts b/apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
index 2db4ba0aa7..92877a7d51 100644
--- 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')
})
})
diff --git a/apps/builder/src/features/blocks/bubbles/video/video.spec.ts b/apps/builder/src/features/blocks/bubbles/video/video.spec.ts
index f0a95def01..52b070af66 100644
--- 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'
)
diff --git a/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts b/apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
index 3ec721fedd..dcad1c7431 100644
--- 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()
})
diff --git a/apps/builder/src/features/blocks/inputs/date/date.spec.ts b/apps/builder/src/features/blocks/inputs/date/date.spec.ts
index 0301a42486..12d8564a7d 100644
--- 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()
})
})
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts b/apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
index 01b2966c75..6feecadc49 100644
--- 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()
})
})
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
index fcedcf13ef..ced9e732ee 100644
--- 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) => {
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
index de6f095481..11a3258c9f 100644
--- 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', () => {
diff --git a/apps/builder/src/features/blocks/inputs/number/number.spec.ts b/apps/builder/src/features/blocks/inputs/number/number.spec.ts
index 7580848135..db0af544f4 100644
--- 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()
})
})
diff --git a/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts b/apps/builder/src/features/blocks/inputs/payment/payment.spec.ts
index df1cfa097b..cc69d2f7dc 100644
--- 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()
})
})
diff --git a/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts b/apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
index 774feaa5bd..c0530968c4 100644
--- 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()
})
})
diff --git a/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts b/apps/builder/src/features/blocks/inputs/rating/rating.spec.ts
index 1520afb437..5ccbc09b43 100644
--- 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 = `