Baptiste Arnaud
1
packages/react/.env.local.example
Normal file
1
packages/react/.env.local.example
Normal file
@ -0,0 +1 @@
|
||||
DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
|
||||
@ -2,9 +2,13 @@
|
||||
"name": "@typebot.io/react",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "dist/index.mjs",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"db:seed": "tsx scripts/seedDatabase.ts",
|
||||
"stories:dev": "pnpm db:seed && ladle serve -p 3006",
|
||||
"stories:build": "ladle build",
|
||||
"build": "pnpm tsc --noEmit && tsup",
|
||||
"dev": "tsup --watch",
|
||||
"lint": "eslint --fix \"src/**/*.ts*\""
|
||||
@ -13,16 +17,22 @@
|
||||
"author": "Baptiste Arnaud",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@typebot.io/js": "workspace:*"
|
||||
"@ladle/react": "^2.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typebot.io/js": "workspace:*",
|
||||
"@types/node": "18.11.18",
|
||||
"@types/react": "18.0.26",
|
||||
"db": "workspace:*",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"react": "18.2.0",
|
||||
"tsconfig": "workspace:*",
|
||||
"tsup": "6.5.0",
|
||||
"typescript": "^4.9.4"
|
||||
"tsx": "3.12.1",
|
||||
"typescript": "^4.9.4",
|
||||
"utils": "workspace:*",
|
||||
"models": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "18.0.0"
|
||||
|
||||
486
packages/react/scripts/ladleTypebot.json
Normal file
486
packages/react/scripts/ladleTypebot.json
Normal file
@ -0,0 +1,486 @@
|
||||
{
|
||||
"id": "clckrl4q5000t3b6sabwokaar",
|
||||
"createdAt": "2023-01-06T17:01:33.101Z",
|
||||
"updatedAt": "2023-01-06T17:02:28.305Z",
|
||||
"icon": "🤝",
|
||||
"name": "Lead Generation copy",
|
||||
"publishedTypebotId": null,
|
||||
"folderId": null,
|
||||
"groups": [
|
||||
{
|
||||
"id": "clckrl4q5000g3b6skizhd262",
|
||||
"title": "Start",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "22HP69iipkLjJDTUcc1AWW",
|
||||
"type": "start",
|
||||
"label": "Start",
|
||||
"groupId": "clckrl4q5000g3b6skizhd262",
|
||||
"outgoingEdgeId": "clckrlxp400173b6sktq7gqm2"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 0, "y": 0 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000h3b6sjipn4qga",
|
||||
"title": "Welcome",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "sc1y8VwDabNJgiVTBi4qtif",
|
||||
"type": "text",
|
||||
"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)"
|
||||
},
|
||||
"groupId": "clckrl4q5000h3b6sjipn4qga"
|
||||
},
|
||||
{
|
||||
"id": "s7YqZTBeyCa4Hp3wN2j922c",
|
||||
"type": "image",
|
||||
"content": {
|
||||
"url": "https://media2.giphy.com/media/XD9o33QG9BoMis7iM4/giphy.gif?cid=fe3852a3ihg8rvipzzky5lybmdyq38fhke2tkrnshwk52c7d&rid=giphy.gif&ct=g"
|
||||
},
|
||||
"groupId": "clckrl4q5000h3b6sjipn4qga"
|
||||
},
|
||||
{
|
||||
"id": "sbjZWLJGVkHAkDqS4JQeGow",
|
||||
"type": "choice input",
|
||||
"items": [
|
||||
{
|
||||
"id": "hQw2zbp7FDX7XYK9cFpbgC",
|
||||
"type": 0,
|
||||
"blockId": "sbjZWLJGVkHAkDqS4JQeGow",
|
||||
"content": "Hi!"
|
||||
}
|
||||
],
|
||||
"groupId": "clckrl4q5000h3b6sjipn4qga",
|
||||
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
|
||||
"outgoingEdgeId": "clckrm7td001b3b6s2769fh7k"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": -8.26171875, "y": 457.515625 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000i3b6stgxyvscq",
|
||||
"title": "Email",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "sxeYubYN6XzhAfG7m9Fivhc",
|
||||
"type": "text",
|
||||
"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}}"
|
||||
},
|
||||
"groupId": "clckrl4q5000i3b6stgxyvscq"
|
||||
},
|
||||
{
|
||||
"id": "scQ5kduafAtfP9T8SHUJnGi",
|
||||
"type": "text",
|
||||
"content": {
|
||||
"html": "<div>What'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?"
|
||||
},
|
||||
"groupId": "clckrl4q5000i3b6stgxyvscq"
|
||||
},
|
||||
{
|
||||
"id": "snbsad18Bgry8yZ8DZCfdFD",
|
||||
"type": "email input",
|
||||
"groupId": "clckrl4q5000i3b6stgxyvscq",
|
||||
"options": {
|
||||
"labels": { "button": "Send", "placeholder": "Type your email..." },
|
||||
"variableId": "v3VFChNVSCXQ2rXv4DrJ8Ah",
|
||||
"retryMessageContent": "This email doesn't seem to be valid. Can you type it again?"
|
||||
},
|
||||
"outgoingEdgeId": "clckrl4q5000q3b6s5czdtm8x"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 669, "y": 141 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000j3b6sloirnxza",
|
||||
"title": "Name",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "sgtE2Sy7cKykac9B223Kq9R",
|
||||
"type": "text",
|
||||
"content": {
|
||||
"html": "<div>What's your name?</div>",
|
||||
"richText": [
|
||||
{ "type": "p", "children": [{ "text": "What's your name?" }] }
|
||||
],
|
||||
"plainText": "What's your name?"
|
||||
},
|
||||
"groupId": "clckrl4q5000j3b6sloirnxza"
|
||||
},
|
||||
{
|
||||
"id": "sqEsMo747LTDnY9FjQcEwUv",
|
||||
"type": "text input",
|
||||
"groupId": "clckrl4q5000j3b6sloirnxza",
|
||||
"options": {
|
||||
"isLong": false,
|
||||
"labels": {
|
||||
"button": "Send",
|
||||
"placeholder": "Type your answer..."
|
||||
},
|
||||
"variableId": "giiLFGw5xXBCHzvp1qAbdX"
|
||||
},
|
||||
"outgoingEdgeId": "clckrl4q5000p3b6shb5bfnzt"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 340, "y": 143 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000k3b6s0anufmgy",
|
||||
"title": "Services",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "su7HceVXWyTCzi2vv3m4QbK",
|
||||
"type": "text",
|
||||
"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?"
|
||||
},
|
||||
"groupId": "clckrl4q5000k3b6s0anufmgy"
|
||||
},
|
||||
{
|
||||
"id": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"type": "choice input",
|
||||
"items": [
|
||||
{
|
||||
"id": "fnLCBF4NdraSwcubnBhk8H",
|
||||
"type": 0,
|
||||
"blockId": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"content": "Website dev"
|
||||
},
|
||||
{
|
||||
"id": "a782h8ynMouY84QjH7XSnR",
|
||||
"type": 0,
|
||||
"blockId": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"content": "Content Marketing"
|
||||
},
|
||||
{
|
||||
"id": "jGvh94zBByvVFpSS3w97zY",
|
||||
"type": 0,
|
||||
"blockId": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"content": "Social Media"
|
||||
},
|
||||
{
|
||||
"id": "6PRLbKUezuFmwWtLVbvAQ7",
|
||||
"type": 0,
|
||||
"blockId": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"content": "UI / UX Design"
|
||||
}
|
||||
],
|
||||
"groupId": "clckrl4q5000k3b6s0anufmgy",
|
||||
"options": { "buttonLabel": "Send", "isMultipleChoice": true },
|
||||
"outgoingEdgeId": "clckrl4q5000r3b6s9yxsuxu7"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 1002, "y": 144 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000l3b6scn1r1nns",
|
||||
"title": "Additional information",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "sqR8Sz9gW21aUYKtUikq7qZ",
|
||||
"type": "text",
|
||||
"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?"
|
||||
},
|
||||
"groupId": "clckrl4q5000l3b6scn1r1nns"
|
||||
},
|
||||
{
|
||||
"id": "sqFy2G3C1mh9p6s3QBdSS5x",
|
||||
"type": "text input",
|
||||
"groupId": "clckrl4q5000l3b6scn1r1nns",
|
||||
"options": {
|
||||
"isLong": true,
|
||||
"labels": { "button": "Send", "placeholder": "Type your answer..." }
|
||||
},
|
||||
"outgoingEdgeId": "clckrl4q5000s3b6stx5nnqbz"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 1337, "y": 145 }
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000m3b6srabr5a2s",
|
||||
"title": "Bye",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "seLegenCgUwMopRFeAefqZ7",
|
||||
"type": "text",
|
||||
"content": {
|
||||
"html": "<div>Perfect!</div>",
|
||||
"richText": [{ "type": "p", "children": [{ "text": "Perfect!" }] }],
|
||||
"plainText": "Perfect!"
|
||||
},
|
||||
"groupId": "clckrl4q5000m3b6srabr5a2s"
|
||||
},
|
||||
{
|
||||
"id": "s779Q1y51aVaDUJVrFb16vv",
|
||||
"type": "text",
|
||||
"content": {
|
||||
"html": "<div>We'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}}"
|
||||
},
|
||||
"groupId": "clckrl4q5000m3b6srabr5a2s"
|
||||
}
|
||||
],
|
||||
"graphCoordinates": { "x": 1668, "y": 143 }
|
||||
},
|
||||
{
|
||||
"id": "clckrlksq000z3b6sequnj9m3",
|
||||
"graphCoordinates": { "x": -355.04296875, "y": 187.5078125 },
|
||||
"title": "Group #7",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "clckrlksq00103b6s3exi90al",
|
||||
"groupId": "clckrlksq000z3b6sequnj9m3",
|
||||
"type": "Condition",
|
||||
"items": [
|
||||
{
|
||||
"id": "clckrlksq00113b6sz8naxdwx",
|
||||
"blockId": "clckrlksq00103b6s3exi90al",
|
||||
"type": 1,
|
||||
"content": {
|
||||
"comparisons": [
|
||||
{
|
||||
"id": "clckrllsm00123b6sz38325aw",
|
||||
"variableId": "giiLFGw5xXBCHzvp1qAbdX",
|
||||
"comparisonOperator": "Is set"
|
||||
}
|
||||
],
|
||||
"logicalOperator": "AND"
|
||||
},
|
||||
"outgoingEdgeId": "clckrlt0000143b6sn9euzwnm"
|
||||
}
|
||||
],
|
||||
"outgoingEdgeId": "clckrluh600153b6s66p2q6wa"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "clckrm1zq00183b6sz8ydapth",
|
||||
"graphCoordinates": { "x": 333.8046875, "y": 408.1328125 },
|
||||
"title": "Group #7 copy",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "clckrm1zr00193b6szpz37plc",
|
||||
"groupId": "clckrm1zq00183b6sz8ydapth",
|
||||
"type": "Condition",
|
||||
"items": [
|
||||
{
|
||||
"id": "clckrm1zr001a3b6s1hlfm2jh",
|
||||
"blockId": "clckrm1zr00193b6szpz37plc",
|
||||
"type": 1,
|
||||
"content": {
|
||||
"comparisons": [
|
||||
{
|
||||
"id": "clckrllsm00123b6sz38325aw",
|
||||
"variableId": "giiLFGw5xXBCHzvp1qAbdX",
|
||||
"comparisonOperator": "Is set"
|
||||
}
|
||||
],
|
||||
"logicalOperator": "AND"
|
||||
},
|
||||
"outgoingEdgeId": "clckrma26001c3b6sup2bdbte"
|
||||
}
|
||||
],
|
||||
"outgoingEdgeId": "clckrmbbk001d3b6shr35s2ao"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "clckrlqil00133b6sk6msgqt1",
|
||||
"graphCoordinates": { "x": -23.78515625, "y": 199.6875 },
|
||||
"title": "Group #8",
|
||||
"blocks": [
|
||||
{
|
||||
"id": "clckrl870000y3b6sxyd24qwc",
|
||||
"groupId": "clckrlqil00133b6sk6msgqt1",
|
||||
"type": "text",
|
||||
"content": {
|
||||
"html": "<div>Hi {{Name}}!</div>",
|
||||
"richText": [
|
||||
{ "type": "p", "children": [{ "text": "Hi {{Name}}!" }] }
|
||||
],
|
||||
"plainText": "Hi {{Name}}!"
|
||||
},
|
||||
"outgoingEdgeId": "clckrlwmd00163b6sjlass4p8"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": [
|
||||
{ "id": "giiLFGw5xXBCHzvp1qAbdX", "name": "Name" },
|
||||
{ "id": "v3VFChNVSCXQ2rXv4DrJ8Ah", "name": "Email" }
|
||||
],
|
||||
"edges": [
|
||||
{
|
||||
"id": "clckrl4q5000p3b6shb5bfnzt",
|
||||
"to": { "groupId": "clckrl4q5000i3b6stgxyvscq" },
|
||||
"from": {
|
||||
"blockId": "sqEsMo747LTDnY9FjQcEwUv",
|
||||
"groupId": "clckrl4q5000j3b6sloirnxza"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000q3b6s5czdtm8x",
|
||||
"to": { "groupId": "clckrl4q5000k3b6s0anufmgy" },
|
||||
"from": {
|
||||
"blockId": "snbsad18Bgry8yZ8DZCfdFD",
|
||||
"groupId": "clckrl4q5000i3b6stgxyvscq"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000r3b6s9yxsuxu7",
|
||||
"to": { "groupId": "clckrl4q5000l3b6scn1r1nns" },
|
||||
"from": {
|
||||
"blockId": "s5VQGsVF4hQgziQsXVdwPDW",
|
||||
"groupId": "clckrl4q5000k3b6s0anufmgy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "clckrl4q5000s3b6stx5nnqbz",
|
||||
"to": { "groupId": "clckrl4q5000m3b6srabr5a2s" },
|
||||
"from": {
|
||||
"blockId": "sqFy2G3C1mh9p6s3QBdSS5x",
|
||||
"groupId": "clckrl4q5000l3b6scn1r1nns"
|
||||
}
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrlksq000z3b6sequnj9m3",
|
||||
"blockId": "clckrlksq00103b6s3exi90al",
|
||||
"itemId": "clckrlksq00113b6sz8naxdwx"
|
||||
},
|
||||
"to": { "groupId": "clckrlqil00133b6sk6msgqt1" },
|
||||
"id": "clckrlt0000143b6sn9euzwnm"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrlksq000z3b6sequnj9m3",
|
||||
"blockId": "clckrlksq00103b6s3exi90al"
|
||||
},
|
||||
"to": { "groupId": "clckrl4q5000h3b6sjipn4qga" },
|
||||
"id": "clckrluh600153b6s66p2q6wa"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrlqil00133b6sk6msgqt1",
|
||||
"blockId": "clckrl870000y3b6sxyd24qwc"
|
||||
},
|
||||
"to": { "groupId": "clckrl4q5000h3b6sjipn4qga" },
|
||||
"id": "clckrlwmd00163b6sjlass4p8"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrl4q5000g3b6skizhd262",
|
||||
"blockId": "22HP69iipkLjJDTUcc1AWW"
|
||||
},
|
||||
"to": { "groupId": "clckrlksq000z3b6sequnj9m3" },
|
||||
"id": "clckrlxp400173b6sktq7gqm2"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrl4q5000h3b6sjipn4qga",
|
||||
"blockId": "sbjZWLJGVkHAkDqS4JQeGow"
|
||||
},
|
||||
"to": { "groupId": "clckrm1zq00183b6sz8ydapth" },
|
||||
"id": "clckrm7td001b3b6s2769fh7k"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrm1zq00183b6sz8ydapth",
|
||||
"blockId": "clckrm1zr00193b6szpz37plc",
|
||||
"itemId": "clckrm1zr001a3b6s1hlfm2jh"
|
||||
},
|
||||
"to": { "groupId": "clckrl4q5000i3b6stgxyvscq" },
|
||||
"id": "clckrma26001c3b6sup2bdbte"
|
||||
},
|
||||
{
|
||||
"from": {
|
||||
"groupId": "clckrm1zq00183b6sz8ydapth",
|
||||
"blockId": "clckrm1zr00193b6szpz37plc"
|
||||
},
|
||||
"to": { "groupId": "clckrl4q5000j3b6sloirnxza" },
|
||||
"id": "clckrmbbk001d3b6shr35s2ao"
|
||||
}
|
||||
],
|
||||
"theme": {
|
||||
"chat": {
|
||||
"inputs": {
|
||||
"color": "#303235",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"placeholderColor": "#9095A0"
|
||||
},
|
||||
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
|
||||
"hostAvatar": {
|
||||
"url": "https://avatars.githubusercontent.com/u/16015833?v=4",
|
||||
"isEnabled": true
|
||||
},
|
||||
"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,
|
||||
"customDomain": null,
|
||||
"workspaceId": "clc0lcuiu00021awrludgbbym",
|
||||
"resultsTablePreferences": null,
|
||||
"isArchived": false,
|
||||
"isClosed": false
|
||||
}
|
||||
60
packages/react/scripts/seedDatabase.ts
Normal file
60
packages/react/scripts/seedDatabase.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { PrismaClient } from 'db'
|
||||
import { Typebot } from 'models'
|
||||
import { parseCreateTypebot } from 'utils/playwright/databaseActions'
|
||||
import { join } from 'path'
|
||||
import { parseTypebotToPublicTypebot } from 'utils/playwright/databaseHelpers'
|
||||
import { readFileSync } from 'fs'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
require('dotenv').config({
|
||||
override: true,
|
||||
path: join(__dirname, `.env.local`),
|
||||
})
|
||||
|
||||
const seedDatabase = async () => {
|
||||
const prisma = new PrismaClient()
|
||||
const data = JSON.parse(
|
||||
readFileSync(join(__dirname, 'ladleTypebot.json')).toString()
|
||||
) as Typebot
|
||||
|
||||
const ladleWorkspace = {
|
||||
id: 'ladleWorkspace',
|
||||
name: 'Ladle',
|
||||
}
|
||||
await prisma.workspace.upsert({
|
||||
where: { id: ladleWorkspace.id },
|
||||
update: {},
|
||||
create: ladleWorkspace,
|
||||
})
|
||||
const ladleTypebot = parseCreateTypebot({
|
||||
...data,
|
||||
id: 'ladleTypebot',
|
||||
folderId: undefined,
|
||||
workspaceId: ladleWorkspace.id,
|
||||
theme: {
|
||||
...data.theme,
|
||||
chat: {
|
||||
...data.theme.chat,
|
||||
hostAvatar: {
|
||||
isEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}) as Typebot
|
||||
const ladlePublicTypebot = parseTypebotToPublicTypebot(
|
||||
ladleTypebot.id + 'Public',
|
||||
ladleTypebot
|
||||
)
|
||||
await prisma.typebot.upsert({
|
||||
where: { id: ladleTypebot.id },
|
||||
update: ladleTypebot,
|
||||
create: ladleTypebot,
|
||||
})
|
||||
await prisma.publicTypebot.upsert({
|
||||
where: { id: ladlePublicTypebot.id },
|
||||
update: ladlePublicTypebot,
|
||||
create: ladlePublicTypebot,
|
||||
})
|
||||
}
|
||||
|
||||
seedDatabase().then()
|
||||
24
packages/react/src/Bubble.tsx
Normal file
24
packages/react/src/Bubble.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { useEffect } from 'react'
|
||||
import type { BubbleProps } from '@typebot.io/js'
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'typebot-bubble': React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLElement>,
|
||||
HTMLElement
|
||||
>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Bubble = (props: BubbleProps) => {
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerBubbleComponent } = await import('@typebot.io/js')
|
||||
registerBubbleComponent(props)
|
||||
})()
|
||||
}, [props])
|
||||
|
||||
return <typebot-bubble />
|
||||
}
|
||||
24
packages/react/src/Popup.tsx
Normal file
24
packages/react/src/Popup.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { useEffect } from 'react'
|
||||
import type { PopupProps } from '@typebot.io/js'
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'typebot-popup': React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLElement>,
|
||||
HTMLElement
|
||||
>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Popup = (props: PopupProps) => {
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerPopupComponent } = await import('@typebot.io/js')
|
||||
registerPopupComponent(props)
|
||||
})()
|
||||
}, [props])
|
||||
|
||||
return <typebot-popup />
|
||||
}
|
||||
@ -17,8 +17,8 @@ declare global {
|
||||
export const Standard = (props: Props) => {
|
||||
useEffect(() => {
|
||||
;(async () => {
|
||||
const { registerWebComponents } = await import('@typebot.io/js')
|
||||
registerWebComponents(props)
|
||||
const { registerStandardComponent } = await import('@typebot.io/js')
|
||||
registerStandardComponent(props)
|
||||
})()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
/* eslint-disable import/no-anonymous-default-export */
|
||||
import { Standard } from './Standard'
|
||||
import { Bubble } from './Bubble'
|
||||
import { Popup } from './Popup'
|
||||
|
||||
export { Standard }
|
||||
export { Standard, Bubble, Popup }
|
||||
|
||||
export default { Standard }
|
||||
export default { Standard, Bubble, Popup }
|
||||
|
||||
export * from '@typebot.io/js/src/features/commands'
|
||||
|
||||
54
packages/react/src/stories/bubble.stories.tsx
Normal file
54
packages/react/src/stories/bubble.stories.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Bubble } from '@/Bubble'
|
||||
import {
|
||||
open,
|
||||
toggle,
|
||||
close,
|
||||
showPreviewMessage,
|
||||
hidePreviewMessage,
|
||||
setPrefilledVariables,
|
||||
} from '@typebot.io/js'
|
||||
import { useState } from 'react'
|
||||
|
||||
export const Default = () => {
|
||||
const [name, setName] = useState('John')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<button onClick={toggle}>Toggle chat window</button>
|
||||
<button onClick={open}>Open chat window</button>
|
||||
<button onClick={close}>Close chat window</button>
|
||||
<button onClick={() => showPreviewMessage()}>
|
||||
Show Preview Message
|
||||
</button>
|
||||
<button onClick={hidePreviewMessage}>Close Preview Message</button>
|
||||
<div>
|
||||
<p>Predefined name:</p>
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<button onClick={() => setPrefilledVariables({ Name: name })}>
|
||||
Set predefined name
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Bubble
|
||||
typebotId="ladleTypebot"
|
||||
apiHost="http://localhost:3001"
|
||||
prefilledVariables={{
|
||||
Name: 'John',
|
||||
}}
|
||||
previewMessage={{
|
||||
avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
|
||||
message: 'Hello, I am a preview message',
|
||||
autoShowDelay: 3000,
|
||||
}}
|
||||
button={{
|
||||
backgroundColor: '#FF7537',
|
||||
icon: {
|
||||
color: 'white',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
packages/react/src/stories/popup.stories.tsx
Normal file
16
packages/react/src/stories/popup.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { Popup } from '../Popup'
|
||||
import { open, toggle } from '@typebot.io/js'
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<>
|
||||
<button onClick={open}>Open modal</button>
|
||||
<button onClick={toggle}>Toggle modal</button>
|
||||
<Popup
|
||||
typebotId="ladleTypebot"
|
||||
apiHost="http://localhost:3001"
|
||||
autoShowDelay={3000}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
9
packages/react/src/stories/standard.stories.tsx
Normal file
9
packages/react/src/stories/standard.stories.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { Standard } from '..'
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<div style={{ height: '500px' }}>
|
||||
<Standard typebotId="ladleTypebot" apiHost="http://localhost:3001" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -5,5 +5,6 @@ export default defineConfig((options) => ({
|
||||
sourcemap: options.watch,
|
||||
minify: !options.watch,
|
||||
dts: true,
|
||||
format: ['esm'],
|
||||
format: ['esm', 'cjs'],
|
||||
external: ['db', 'cuid'],
|
||||
}))
|
||||
|
||||
Reference in New Issue
Block a user