From b87ba4023dea7b47c835fe11a9d36a653d5469b0 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Thu, 13 Oct 2022 08:42:24 +0200 Subject: [PATCH] :sparkles: (template) Add FAQ bot template --- .../components/shared/hooks/useToast.tsx | 27 +- .../components/templates/TemplatesModal.tsx | 26 +- apps/builder/components/templates/data.ts | 3 +- apps/builder/public/templates/faq.json | 574 ++++++++++++++++++ 4 files changed, 603 insertions(+), 27 deletions(-) create mode 100644 apps/builder/public/templates/faq.json diff --git a/apps/builder/components/shared/hooks/useToast.tsx b/apps/builder/components/shared/hooks/useToast.tsx index c260095a60..e28c692399 100644 --- a/apps/builder/components/shared/hooks/useToast.tsx +++ b/apps/builder/components/shared/hooks/useToast.tsx @@ -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 } } diff --git a/apps/builder/components/templates/TemplatesModal.tsx b/apps/builder/components/templates/TemplatesModal.tsx index 3beba14a56..3d52fe3835 100644 --- a/apps/builder/components/templates/TemplatesModal.tsx +++ b/apps/builder/components/templates/TemplatesModal.tsx @@ -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 diff --git a/apps/builder/components/templates/data.ts b/apps/builder/components/templates/data.ts index 6484742859..1a2da478a4 100644 --- a/apps/builder/components/templates/data.ts +++ b/apps/builder/components/templates/data.ts @@ -18,8 +18,7 @@ export const templates: TemplateProps[] = [ { name: 'FAQ', emoji: '๐Ÿ’ฌ', - fileName: 'customer-support.json', - isComingSoon: true, + fileName: 'faq.json', }, { name: 'Conversational Resume', diff --git a/apps/builder/public/templates/faq.json b/apps/builder/public/templates/faq.json new file mode 100644 index 0000000000..66b9ad6730 --- /dev/null +++ b/apps/builder/public/templates/faq.json @@ -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": "
If you have a question about our product, you're in the right place ๐Ÿ˜Š
", + "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": "
Hey there ๐Ÿ‘‹
", + "richText": [ + { "type": "p", "children": [{ "text": "Hey there ๐Ÿ‘‹" }] } + ], + "plainText": "Hey there ๐Ÿ‘‹" + } + }, + { + "id": "cl96ntraa00083b6ij922v2qh", + "groupId": "cl96nt9ob00063b6ii2pktlxq", + "type": "text", + "content": { + "html": "
I'm John, head of the customer success Team at Analyzr
", + "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": "
Analyzr is a simple and privacy-friendly analytics tool for your website
", + "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": "
It is:
โœ… Lightweight
โœ… Open-source
โœ… Fully compliant with GDPR
", + "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": "
You can!
", + "richText": [{ "type": "p", "children": [{ "text": "You can!" }] }], + "plainText": "You can!" + } + }, + { + "id": "cl96o6a2700143b6ija9jqhky", + "groupId": "cl96o6a2700123b6ie4efb6bb", + "type": "text", + "content": { + "html": "
Analyzr has a generous free plan that allows you to store 1,000,000ย events/mo ๐Ÿš€
", + "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": "
An event is a user event on your website.
", + "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": "
It can be "User visited this URL" or "User clicked on this button"
", + "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": "
The company was founded in 2020 by Josh Corn
", + "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": "
We are now a team of 15
", + "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": "
Our core values are:
๐Ÿ” Transparency
โšก Ship fast
๐Ÿ’™ Awesome customer support
", + "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": "
Sure, no problem!
", + "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": "
Alright, we'll reach out to you very soon. Thank you so much ๐Ÿ’™
", + "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 +}