blsmedia/bot
2
0
Fork 0
Code Activity

✨ (template) Add FAQ bot template

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-10-13 08:42:24 +02:00
parent 40d2db59dc
commit b87ba4023d
4 changed files with 603 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/builder/components/shared/hooks/useToast.tsx
View File

@ -1,22 +1,21 @@
import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react'
import { useCallback } from 'react'
export const useToast = () => {
const toast = useChakraToast()
const showToast = ({
title,
description,
status = 'error',
...props
}: UseToastOptions) => {
toast({
position: 'bottom-right',
description,
title,
status,
...props,
})
}
const showToast = useCallback(
({ title, description, status = 'error', ...props }: UseToastOptions) => {
toast({
position: 'bottom-right',
description,
title,
status,
...props,
})
},
[toast]
)
return { showToast }
}

26
apps/builder/components/templates/TemplatesModal.tsx
View File

@ -15,7 +15,7 @@ import { ExternalLinkIcon } from 'assets/icons'
import { TypebotViewer } from 'bot-engine'
import { useToast } from 'components/shared/hooks/useToast'
import { Typebot } from 'models'
import React, { useEffect, useState } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
import { getViewerUrl, sendRequest } from 'utils'
import { TemplateProps, templates } from './data'
@ -35,18 +35,22 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
const { showToast } = useToast()
const fetchTemplate = useCallback(
async (template: TemplateProps) => {
setSelectedTemplate(template)
const { data, error } = await sendRequest(
`/templates/${template.fileName}`
)
if (error)
return showToast({ title: error.name, description: error.message })
setTypebot(data as Typebot)
},
[showToast]
)
useEffect(() => {
fetchTemplate(templates[0])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const fetchTemplate = async (template: TemplateProps) => {
setSelectedTemplate(template)
const { data, error } = await sendRequest(`/templates/${template.fileName}`)
if (error)
return showToast({ title: error.name, description: error.message })
setTypebot(data as Typebot)
}
}, [fetchTemplate])
const onUseThisTemplateClick = () => {
if (!typebot) return

3
apps/builder/components/templates/data.ts
View File

@ -18,8 +18,7 @@ export const templates: TemplateProps[] = [
{
name: 'FAQ',
emoji: '💬',
fileName: 'customer-support.json',
isComingSoon: true,
fileName: 'faq.json',
},
{
name: 'Conversational Resume',

574
apps/builder/public/templates/faq.json Normal file
View File

@ -0,0 +1,574 @@
{
"id": "cl96ns7zc000dky099ku4bmav",
"createdAt": "2022-10-13T06:07:11.976Z",
"updatedAt": "2022-10-13T06:27:31.951Z",
"icon": "💬",
"name": "FAQ",
"publishedTypebotId": null,
"folderId": null,
"groups": [
{
"id": "cl96ns7za000309kyewk56s22",
"title": "Start",
"blocks": [
{
"id": "cl96ns7za000409kydoui7mpu",
"type": "start",
"label": "Start",
"groupId": "cl96ns7za000309kyewk56s22",
"outgoingEdgeId": "cl96nv0ij00093b6id4t83dvu"
}
],
"graphCoordinates": { "x": 0, "y": 0 }
},
{
"id": "cl96ns9qr00043b6ii07bo25o",
"graphCoordinates": { "x": 392, "y": 181 },
"title": "Menu",
"blocks": [
{
"id": "cl96ns9qr00053b6igebgtl5q",
"groupId": "cl96ns9qr00043b6ii07bo25o",
"type": "text",
"content": {
"html": "<div>If you have a question about our product, you&apos;re in the right place 😊</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "If you have a question about our product, you're in the right place 😊"
}
]
}
],
"plainText": "If you have a question about our product, you're in the right place 😊"
}
},
{
"id": "cl96nv877000b3b6i7p69ss2o",
"groupId": "cl96ns9qr00043b6ii07bo25o",
"type": "choice input",
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
"items": [
{
"id": "cl96nv877000c3b6idyepv694",
"blockId": "cl96nv877000b3b6i7p69ss2o",
"type": 0,
"content": "What's Analyzr?",
"outgoingEdgeId": "cl96o2u6h000t3b6izmh4pguj"
},
{
"blockId": "cl96nv877000b3b6i7p69ss2o",
"type": 0,
"id": "cl96nvcwi000d3b6ipyfzcyaw",
"content": "Can I use your tool for free?",
"outgoingEdgeId": "cl96o6hxh00173b6ix83nn581"
},
{
"blockId": "cl96nv877000b3b6i7p69ss2o",
"type": 0,
"id": "cl96obwgy001k3b6ir1a8qk5w",
"content": "Tell me about the company",
"outgoingEdgeId": "cl96ofn4s001q3b6i482xx6jp"
},
{
"blockId": "cl96nv877000b3b6i7p69ss2o",
"type": 0,
"id": "cl96nvstv000e3b6itm8cj1s5",
"content": "I have another question",
"outgoingEdgeId": "cl96ogaa0001x3b6izae2alxq"
}
]
}
]
},
{
"id": "cl96nt9ob00063b6ii2pktlxq",
"graphCoordinates": { "x": 26.51592874499341, "y": 202.71976248331134 },
"title": "Welcom",
"blocks": [
{
"id": "cl96nt9ob00073b6ionlvakha",
"groupId": "cl96nt9ob00063b6ii2pktlxq",
"type": "text",
"content": {
"html": "<div>Hey there 👋</div>",
"richText": [
{ "type": "p", "children": [{ "text": "Hey there 👋" }] }
],
"plainText": "Hey there 👋"
}
},
{
"id": "cl96ntraa00083b6ij922v2qh",
"groupId": "cl96nt9ob00063b6ii2pktlxq",
"type": "text",
"content": {
"html": "<div>I&apos;m John, head of the customer success Team at Analyzr</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "I'm John, head of the customer success Team at Analyzr"
}
]
}
],
"plainText": "I'm John, head of the customer success Team at Analyzr"
},
"outgoingEdgeId": "cl96nv51s000a3b6i3wmlcmdt"
}
]
},
{
"id": "cl96o2cgi000r3b6iljr1iwdl",
"graphCoordinates": { "x": 787, "y": -534 },
"title": "What's Analyzr",
"blocks": [
{
"id": "cl96o2cgi000s3b6ikdv6iogz",
"groupId": "cl96o2cgi000r3b6iljr1iwdl",
"type": "text",
"content": {
"html": "<div>Analyzr is a simple and privacy-friendly analytics tool for your website</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "Analyzr is a simple and privacy-friendly analytics tool for your website"
}
]
}
],
"plainText": "Analyzr is a simple and privacy-friendly analytics tool for your website"
}
},
{
"id": "cl96o3260000u3b6i9czqm52g",
"groupId": "cl96o2cgi000r3b6iljr1iwdl",
"type": "text",
"content": {
"html": "<div>It is:</div><div>✅ Lightweight</div><div>✅ Open-source</div><div>✅ Fully compliant with GDPR</div>",
"richText": [
{ "type": "p", "children": [{ "text": "It is:" }] },
{ "type": "p", "children": [{ "text": "✅ Lightweight" }] },
{ "type": "p", "children": [{ "text": "✅ Open-source" }] },
{
"type": "p",
"children": [{ "text": "✅ Fully compliant with GDPR" }]
}
],
"plainText": "It is:✅ Lightweight✅ Open-source✅ Fully compliant with GDPR"
}
},
{
"id": "cl96o55z3000x3b6ikq14g2tu",
"groupId": "cl96o2cgi000r3b6iljr1iwdl",
"type": "choice input",
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
"items": [
{
"id": "cl96o55z3000y3b6idpn54byw",
"blockId": "cl96o55z3000x3b6ikq14g2tu",
"type": 0,
"content": "Sounds good!",
"outgoingEdgeId": "cl96o5k4n00103b6irh2dfp2r"
}
]
}
]
},
{
"id": "cl96o6a2700123b6ie4efb6bb",
"graphCoordinates": { "x": 803.5720553542924, "y": 7.420010744791735 },
"title": "Use for free",
"blocks": [
{
"id": "cl96o6a2700133b6ii5n027h2",
"groupId": "cl96o6a2700123b6ie4efb6bb",
"type": "text",
"content": {
"html": "<div>You can!</div>",
"richText": [{ "type": "p", "children": [{ "text": "You can!" }] }],
"plainText": "You can!"
}
},
{
"id": "cl96o6a2700143b6ija9jqhky",
"groupId": "cl96o6a2700123b6ie4efb6bb",
"type": "text",
"content": {
"html": "<div>Analyzr has a generous free plan that allows you to store 1,000,000 events/mo 🚀</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "Analyzr has a generous free plan that allows you to store 1,000,000 events/mo 🚀"
}
]
}
],
"plainText": "Analyzr has a generous free plan that allows you to store 1,000,000 events/mo 🚀"
}
},
{
"id": "cl96o6a2700153b6il1wj2aev",
"groupId": "cl96o6a2700123b6ie4efb6bb",
"type": "choice input",
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
"items": [
{
"id": "cl96o6a2700163b6i818ywnqv",
"blockId": "cl96o6a2700153b6il1wj2aev",
"type": 0,
"content": "Awesome!",
"outgoingEdgeId": "cl96oa6kn001g3b6iaormwu2j"
},
{
"blockId": "cl96o6a2700153b6il1wj2aev",
"type": 0,
"id": "cl96o83lo00183b6igen42ivq",
"content": "What's an event?",
"outgoingEdgeId": "cl96oa83f001h3b6i81wodnjx"
}
]
}
]
},
{
"id": "cl96o8eym001a3b6i3lxh7kw0",
"graphCoordinates": { "x": 1179.4933795363515, "y": 7.7432256889634 },
"title": "User event",
"blocks": [
{
"id": "cl96o8eyn001b3b6icmbgg7lw",
"groupId": "cl96o8eym001a3b6i3lxh7kw0",
"type": "text",
"content": {
"html": "<div>An event is a user event on your website.</div>",
"richText": [
{
"type": "p",
"children": [
{ "text": "An event is a user event on your website." }
]
}
],
"plainText": "An event is a user event on your website."
}
},
{
"id": "cl96o990s001c3b6ie2jjefhf",
"groupId": "cl96o8eym001a3b6i3lxh7kw0",
"type": "text",
"content": {
"html": "<div>It can be &quot;User visited this URL&quot; or &quot;User clicked on this button&quot;</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "It can be \"User visited this URL\" or \"User clicked on this button\""
}
]
}
],
"plainText": "It can be \"User visited this URL\" or \"User clicked on this button\""
}
},
{
"id": "cl96o9xba001d3b6i9004l33e",
"groupId": "cl96o8eym001a3b6i3lxh7kw0",
"type": "choice input",
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
"items": [
{
"id": "cl96o9xbd001e3b6i6ag5ooo7",
"blockId": "cl96o9xba001d3b6i9004l33e",
"type": 0,
"content": "Ok, got it!"
}
]
},
{
"id": "cl96oaa8n001j3b6ieqe5r775",
"groupId": "cl96o8eym001a3b6i3lxh7kw0",
"type": "Typebot link",
"options": {
"typebotId": "current",
"groupId": "cl96ns9qr00043b6ii07bo25o"
}
}
]
},
{
"id": "cl96oc274001m3b6ig3beli9v",
"graphCoordinates": { "x": 802.8616130197884, "y": 477.1611550243932 },
"title": "Company",
"blocks": [
{
"id": "cl96ods3i001o3b6iiyboljuf",
"groupId": "cl96oc274001m3b6ig3beli9v",
"type": "text",
"content": {
"html": "<div>The company was founded in 2020 by Josh Corn</div>",
"richText": [
{
"type": "p",
"children": [
{ "text": "The company was founded in 2020 by Josh Corn" }
]
}
],
"plainText": "The company was founded in 2020 by Josh Corn"
}
},
{
"id": "cl96oc277001n3b6if8wv6hzl",
"groupId": "cl96oc274001m3b6ig3beli9v",
"type": "text",
"content": {
"html": "<div>We are now a team of 15</div>",
"richText": [
{
"type": "p",
"children": [{ "text": "We are now a team of 15" }]
}
],
"plainText": "We are now a team of 15"
}
},
{
"id": "cl96oenlh001p3b6iutaiw9wl",
"groupId": "cl96oc274001m3b6ig3beli9v",
"type": "text",
"content": {
"html": "<div>Our core values are:</div><div></div><div>🔍 Transparency</div><div>⚡ Ship fast</div><div>💙 Awesome customer support</div>",
"richText": [
{ "type": "p", "children": [{ "text": "Our core values are:" }] },
{ "type": "p", "children": [{ "text": "" }] },
{ "type": "p", "children": [{ "text": "🔍 Transparency" }] },
{ "type": "p", "children": [{ "text": "⚡ Ship fast" }] },
{
"type": "p",
"children": [{ "text": "💙 Awesome customer support" }]
}
],
"plainText": "Our core values are:🔍 Transparency⚡ Ship fast💙 Awesome customer support"
}
},
{
"id": "cl96oftnv001r3b6ixen8g0bv",
"groupId": "cl96oc274001m3b6ig3beli9v",
"type": "choice input",
"options": { "buttonLabel": "Send", "isMultipleChoice": false },
"items": [
{
"id": "cl96oftnv001s3b6i7kjyq7me",
"blockId": "cl96oftnv001r3b6ixen8g0bv",
"type": 0,
"content": "Cool!",
"outgoingEdgeId": "cl96ofyy3001u3b6iro2dkp0w"
}
]
}
]
},
{
"id": "cl96og2yr001v3b6ivhzb1x34",
"graphCoordinates": { "x": 798.1737080264639, "y": 1045.5696354649942 },
"title": "Question",
"blocks": [
{
"id": "cl96og2yu001w3b6ijqgstubu",
"groupId": "cl96og2yr001v3b6ivhzb1x34",
"type": "text",
"content": {
"html": "<div>Sure, no problem!</div>",
"richText": [
{ "type": "p", "children": [{ "text": "Sure, no problem!" }] }
],
"plainText": "Sure, no problem!"
}
},
{
"id": "cl96ogmjx001y3b6iwfosloet",
"groupId": "cl96og2yr001v3b6ivhzb1x34",
"type": "text input",
"options": {
"isLong": true,
"labels": {
"button": "Send",
"placeholder": "Type your question..."
}
},
"outgoingEdgeId": "cl96ohn9900213b6ibex8g6my"
}
]
},
{
"id": "cl96oh3mn001z3b6i2b0no81w",
"graphCoordinates": { "x": 1174.378083740756, "y": 1049.0855642099898 },
"title": "Bye",
"blocks": [
{
"id": "cl96oh3mn00203b6iahw2x1ns",
"groupId": "cl96oh3mn001z3b6i2b0no81w",
"type": "text",
"content": {
"html": "<div>Alright, we&apos;ll reach out to you very soon. Thank you so much 💙</div>",
"richText": [
{
"type": "p",
"children": [
{
"text": "Alright, we'll reach out to you very soon. Thank you so much 💙"
}
]
}
],
"plainText": "Alright, we'll reach out to you very soon. Thank you so much 💙"
}
}
]
}
],
"variables": [],
"edges": [
{
"from": {
"groupId": "cl96ns7za000309kyewk56s22",
"blockId": "cl96ns7za000409kydoui7mpu"
},
"to": { "groupId": "cl96nt9ob00063b6ii2pktlxq" },
"id": "cl96nv0ij00093b6id4t83dvu"
},
{
"from": {
"groupId": "cl96nt9ob00063b6ii2pktlxq",
"blockId": "cl96ntraa00083b6ij922v2qh"
},
"to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
"id": "cl96nv51s000a3b6i3wmlcmdt"
},
{
"from": {
"groupId": "cl96ns9qr00043b6ii07bo25o",
"blockId": "cl96nv877000b3b6i7p69ss2o",
"itemId": "cl96nv877000c3b6idyepv694"
},
"to": { "groupId": "cl96o2cgi000r3b6iljr1iwdl" },
"id": "cl96o2u6h000t3b6izmh4pguj"
},
{
"from": {
"groupId": "cl96o2cgi000r3b6iljr1iwdl",
"blockId": "cl96o55z3000x3b6ikq14g2tu",
"itemId": "cl96o55z3000y3b6idpn54byw"
},
"to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
"id": "cl96o5k4n00103b6irh2dfp2r"
},
{
"from": {
"groupId": "cl96ns9qr00043b6ii07bo25o",
"blockId": "cl96nv877000b3b6i7p69ss2o",
"itemId": "cl96nvcwi000d3b6ipyfzcyaw"
},
"to": { "groupId": "cl96o6a2700123b6ie4efb6bb" },
"id": "cl96o6hxh00173b6ix83nn581"
},
{
"from": {
"groupId": "cl96o6a2700123b6ie4efb6bb",
"blockId": "cl96o6a2700153b6il1wj2aev",
"itemId": "cl96o6a2700163b6i818ywnqv"
},
"to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
"id": "cl96oa6kn001g3b6iaormwu2j"
},
{
"from": {
"groupId": "cl96o6a2700123b6ie4efb6bb",
"blockId": "cl96o6a2700153b6il1wj2aev",
"itemId": "cl96o83lo00183b6igen42ivq"
},
"to": { "groupId": "cl96o8eym001a3b6i3lxh7kw0" },
"id": "cl96oa83f001h3b6i81wodnjx"
},
{
"from": {
"groupId": "cl96ns9qr00043b6ii07bo25o",
"blockId": "cl96nv877000b3b6i7p69ss2o",
"itemId": "cl96obwgy001k3b6ir1a8qk5w"
},
"to": { "groupId": "cl96oc274001m3b6ig3beli9v" },
"id": "cl96ofn4s001q3b6i482xx6jp"
},
{
"from": {
"groupId": "cl96oc274001m3b6ig3beli9v",
"blockId": "cl96oftnv001r3b6ixen8g0bv",
"itemId": "cl96oftnv001s3b6i7kjyq7me"
},
"to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
"id": "cl96ofyy3001u3b6iro2dkp0w"
},
{
"from": {
"groupId": "cl96ns9qr00043b6ii07bo25o",
"blockId": "cl96nv877000b3b6i7p69ss2o",
"itemId": "cl96nvstv000e3b6itm8cj1s5"
},
"to": { "groupId": "cl96og2yr001v3b6ivhzb1x34" },
"id": "cl96ogaa0001x3b6izae2alxq"
},
{
"from": {
"groupId": "cl96og2yr001v3b6ivhzb1x34",
"blockId": "cl96ogmjx001y3b6iwfosloet"
},
"to": { "groupId": "cl96oh3mn001z3b6i2b0no81w" },
"id": "cl96ohn9900213b6ibex8g6my"
}
],
"theme": {
"chat": {
"inputs": {
"color": "#303235",
"backgroundColor": "#FFFFFF",
"placeholderColor": "#9095A0"
},
"buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
"hostAvatar": {
"isEnabled": true,
"url": "https://s3.fr-par.scw.cloud/typebot/public/typebots/cl96ns7zc000dky099ku4bmav/sigmund-a19OVaa2rzA-unsplash Small.jpeg"
},
"hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
"guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
},
"general": { "font": "Open Sans", "background": { "type": "None" } }
},
"settings": {
"general": {
"isBrandingEnabled": false,
"isInputPrefillEnabled": true,
"isHideQueryParamsEnabled": true,
"isNewResultOnRefreshEnabled": false
},
"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": "cl35yesle00188gcpgqu70ia1",
"resultsTablePreferences": null,
"isArchived": false,
"isClosed": false
}