✨ (template) Add FAQ bot template

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 = ({
+  const showToast = useCallback(
-    title,
+    ({ title, description, status = 'error', ...props }: UseToastOptions) => {
-    description,
+      toast({
-    status = 'error',
+        position: 'bottom-right',
-    ...props
+        description,
-  }: UseToastOptions) => {
+        title,
-    toast({
+        status,
-      position: 'bottom-right',
+        ...props,
-      description,
+      })
-      title,
+    },
-      status,
+    [toast]
-      ...props,
+  )
-    })
-  }
 
   return { showToast }
 }

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
+  }, [fetchTemplate])
-  }, [])
-
-  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)
-  }
 
   const onUseThisTemplateClick = () => {
     if (!typebot) return

apps/builder/components/templates/data.ts

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

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": "<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
+}