✨ (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 = ({
- 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 }
 }

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

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',