🌐 Add templates name and description translation keys (#1120)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Templates now support multiple languages with the introduction of a
translation function for template names, descriptions, and category
tags.

- **Enhancements**
- Improved template naming consistency with capitalization adjustments
for clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -15,7 +15,7 @@ import {
 import { Standard } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useCallback, useEffect, useState } from 'react'
-import { templates } from '../data'
+import { useTemplates } from '../hooks/useTemplates'
 import { TemplateProps } from '../types'
 import { useToast } from '@/hooks/useToast'
 import { sendRequest } from '@typebot.io/lib'
@@ -37,6 +37,7 @@ export const TemplatesModal = ({
   const { t } = useTranslate()
   const templateCardBackgroundColor = useColorModeValue('white', 'gray.800')
   const [typebot, setTypebot] = useState<Typebot>()
+  const templates = useTemplates()
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
     templates[0]
   )
@@ -50,14 +51,15 @@ export const TemplatesModal = ({
       )
       if (error)
         return showToast({ title: error.name, description: error.message })
-      setTypebot(data as Typebot)
+      setTypebot({ ...(data as Typebot), name: template.name })
     },
     [showToast]
   )
 
   useEffect(() => {
+    if (typebot) return
     fetchTemplate(templates[0])
-  }, [fetchTemplate])
+  }, [fetchTemplate, typebot, templates])
 
   const onUseThisTemplateClick = async () => {
     if (!typebot) return

apps/builder/src/features/templates/data.ts

@@ -1,136 +0,0 @@
-import { TemplateProps } from './types'
-
-export const templates: TemplateProps[] = [
-  {
-    name: 'Lead Generation',
-    emoji: '🤝',
-    fileName: 'lead-gen.json',
-    category: 'marketing',
-    description:
-      'You are a marketing agency and this bot allows you generate new leads interested in your services',
-  },
-  {
-    name: 'Customer Support',
-    emoji: '😍',
-    fileName: 'customer-support.json',
-    category: 'product',
-    description:
-      'A bot whose job is to collect user feedback: questions, bugs and feature requests.',
-  },
-  {
-    name: 'Quiz',
-    emoji: '🕹️',
-    fileName: 'quiz.json',
-    category: 'marketing',
-    description:
-      'A fun quizz to engage with your users and collect their emails',
-  },
-  {
-    name: 'Lead Scoring',
-    emoji: '🏆',
-    fileName: 'lead-scoring.json',
-    category: 'marketing',
-    description:
-      'Compute a score alongside lead qualification questions to rank your new prospects',
-  },
-  {
-    name: 'Lead magnet',
-    emoji: '🧲',
-    fileName: 'lead-magnet.json',
-    category: 'marketing',
-    description:
-      'Provide a free content to your prospects in exchange for their contact information.',
-  },
-  {
-    name: 'Product recommendation',
-    emoji: '🍫',
-    fileName: 'product-recommendation.json',
-    category: 'marketing',
-    description:
-      'Näak is a company that sells energy bars, hydration mix and recovery prodcuts. This bot helps a visitor choosing the right product. It helps you qualify your lead and provide a personalized recommendation.',
-    backgroundColor: '#010000',
-  },
-  {
-    name: 'NPS Survey',
-    emoji: '⭐',
-    fileName: 'nps.json',
-    category: 'product',
-    description:
-      'A simple NPS survey to measure your customer satisfaction and improve your product',
-  },
-  {
-    name: 'User Onboarding',
-    emoji: '🧑‍🚀',
-    fileName: 'onboarding.json',
-    category: 'product',
-    description:
-      'A bot that asks for new user information before he start using your product',
-  },
-  {
-    name: 'Digital Product Payment',
-    emoji: '🖼️',
-    fileName: 'digital-product-payment.json',
-    description:
-      'A bot that allows you to sell digital products (ebooks, courses, etc.) and only provide the content after the payment is confirmed',
-  },
-  {
-    name: 'FAQ',
-    emoji: '💬',
-    fileName: 'faq.json',
-    category: 'product',
-    description:
-      'A bot that answers frequently asked questions about your product or service',
-  },
-  {
-    name: 'Movie Recommendation',
-    emoji: '🍿',
-    fileName: 'movie-recommendation.json',
-    description: 'A bot that recommends movies based on the user preferences',
-  },
-  {
-    name: 'Basic ChatGPT',
-    emoji: '🤖',
-    fileName: 'basic-chat-gpt.json',
-    description:
-      'A bot that uses the ChatGPT model to generate responses based on the user input',
-  },
-  {
-    name: 'Audio ChatGPT',
-    emoji: '🤖',
-    fileName: 'audio-chat-gpt.json',
-    description:
-      'An audio AI bot that uses the OpenAI block to generate responses based on the user input',
-    isNew: true,
-  },
-  {
-    name: 'ChatGPT personas',
-    emoji: '🎭',
-    fileName: 'chat-gpt-personas.json',
-    description:
-      'A bot that uses the ChatGPT model to generate responses based on the user input and the selected persona',
-  },
-  {
-    name: 'Lead Gen with AI',
-    emoji: '🦾',
-    fileName: 'lead-gen-ai.json',
-    category: 'marketing',
-    description:
-      'You are a marketing agency and this bot allows you generate new leads interested in your services. An AI block is used to dig deeper into the user needs.',
-  },
-  {
-    name: 'Insurance offer',
-    emoji: '🐶',
-    fileName: 'dog-insurance-offer.json',
-    category: 'marketing',
-    description:
-      'You are a dog insurance company. This bot allows you to collect information about the dog and provide a quote.',
-  },
-  {
-    name: 'OpenAI conditions',
-    emoji: '🧠',
-    fileName: 'openai-conditions.json',
-    isNew: true,
-    description:
-      'This is an example of how you can use the OpenAI block to take smart decisions based on the user input and redirect the conversation to the right path.',
-  },
-]

apps/builder/src/features/templates/hooks/useTemplates.ts

@@ -0,0 +1,127 @@
+import { TemplateProps } from '../types'
+import { useTranslate } from '@tolgee/react'
+
+export const useTemplates = (): TemplateProps[] => {
+  const { t } = useTranslate()
+
+  return [
+    {
+      name: t('templates.modal.marketing.leadGeneration.name'),
+      emoji: '🤝',
+      fileName: 'lead-gen.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadGeneration.description'),
+    },
+    {
+      name: t('templates.modal.product.customerSupport.name'),
+      emoji: '😍',
+      fileName: 'customer-support.json',
+      category: 'product',
+      description: t('templates.modal.product.customerSupport.description'),
+    },
+    {
+      name: t('templates.modal.marketing.quiz.name'),
+      emoji: '🕹️',
+      fileName: 'quiz.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.quiz.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadScoring.name'),
+      emoji: '🏆',
+      fileName: 'lead-scoring.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadScoring.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadMagnet.name'),
+      emoji: '🧲',
+      fileName: 'lead-magnet.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadMagnet.description'),
+    },
+    {
+      name: t('templates.modal.marketing.productRecommendation.name'),
+      emoji: '🍫',
+      fileName: 'product-recommendation.json',
+      category: 'marketing',
+      description: t(
+        'templates.modal.marketing.productRecommendation.description'
+      ),
+      backgroundColor: '#010000',
+    },
+    {
+      name: t('templates.modal.product.npsSurvey.name'),
+      emoji: '⭐',
+      fileName: 'nps.json',
+      category: 'product',
+      description: t('templates.modal.product.npsSurvey.description'),
+    },
+    {
+      name: t('templates.modal.product.userOnboarding.name'),
+      emoji: '🧑‍🚀',
+      fileName: 'onboarding.json',
+      category: 'product',
+      description: t('templates.modal.product.userOnboarding.description'),
+    },
+    {
+      name: t('templates.modal.other.digitalProductPayment.name'),
+      emoji: '🖼️',
+      fileName: 'digital-product-payment.json',
+      description: t('templates.modal.other.digitalProductPayment.description'),
+    },
+    {
+      name: t('templates.modal.product.faq.name'),
+      emoji: '💬',
+      fileName: 'faq.json',
+      category: 'product',
+      description: t('templates.modal.product.faq.description'),
+    },
+    {
+      name: t('templates.modal.other.movieRecommendation.name'),
+      emoji: '🍿',
+      fileName: 'movie-recommendation.json',
+      description: t('templates.modal.other.movieRecommendation.description'),
+    },
+    {
+      name: t('templates.modal.other.basicChatGpt.name'),
+      emoji: '🤖',
+      fileName: 'basic-chat-gpt.json',
+      description: t('templates.modal.other.basicChatGpt.description'),
+    },
+    {
+      name: t('templates.modal.other.audioChatGpt.name'),
+      emoji: '🤖',
+      fileName: 'audio-chat-gpt.json',
+      description: t('templates.modal.other.audioChatGpt.description'),
+      isNew: true,
+    },
+    {
+      name: t('templates.modal.other.chatGptPersonas.name'),
+      emoji: '🎭',
+      fileName: 'chat-gpt-personas.json',
+      description: t('templates.modal.other.chatGptPersonas.description'),
+    },
+    {
+      name: t('templates.modal.marketing.leadGenWithAi.name'),
+      emoji: '🦾',
+      fileName: 'lead-gen-ai.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.leadGenWithAi.description'),
+    },
+    {
+      name: t('templates.modal.marketing.insuranceOffer.name'),
+      emoji: '🐶',
+      fileName: 'dog-insurance-offer.json',
+      category: 'marketing',
+      description: t('templates.modal.marketing.insuranceOffer.description'),
+    },
+    {
+      name: t('templates.modal.other.openAiConditions.name'),
+      emoji: '🧠',
+      fileName: 'openai-conditions.json',
+      isNew: true,
+      description: t('templates.modal.other.openAiConditions.description'),
+    },
+  ]
+}

apps/builder/src/i18n/en.json

@@ -271,11 +271,46 @@
   "templates.buttons.heading": "Create a new typebot",
   "templates.buttons.importFileButton.label": "Import a file",
   "templates.importFromFileButon.toastError.description": "Failed to parse the file. Are you sure it's a typebot?",
+  "templates.modal.marketing.insuranceOffer.description": "You are a dog insurance company. This bot allows you to collect information about the dog and provide a quote.",
+  "templates.modal.marketing.insuranceOffer.name": "Insurance Offer",
+  "templates.modal.marketing.leadGenWithAi.description": "You are a marketing agency and this bot allows you generate new leads interested in your services. An AI block is used to dig deeper into the user needs.",
+  "templates.modal.marketing.leadGenWithAi.name": "Lead Gen with AI",
+  "templates.modal.marketing.leadGeneration.description": "You are a marketing agency and this bot allows you generate new leads interested in your services.",
+  "templates.modal.marketing.leadGeneration.name": "Lead Generation",
+  "templates.modal.marketing.leadMagnet.description": "Provide a free content to your prospects in exchange for their contact information.",
+  "templates.modal.marketing.leadMagnet.name": "Lead Magnet",
+  "templates.modal.marketing.leadScoring.description": "Compute a score alongside lead qualification questions to rank your new prospects.",
+  "templates.modal.marketing.leadScoring.name": "Lead Scoring",
+  "templates.modal.marketing.productRecommendation.description": "Näak is a company that sells energy bars, hydration mix and recovery prodcuts. This bot helps a visitor choosing the right product. It helps you qualify your lead and provide a personalized recommendation.",
+  "templates.modal.marketing.productRecommendation.name": "Product Recommendation",
+  "templates.modal.marketing.quiz.description": "A fun quiz to engage with your users and collect their emails.",
+  "templates.modal.marketing.quiz.name": "Quiz",
   "templates.modal.menuHeading.marketing": "Marketing",
   "templates.modal.menuHeading.new.tag": "New",
   "templates.modal.menuHeading.other": "Other",
   "templates.modal.menuHeading.product": "Product",
+  "templates.modal.other.audioChatGpt.description": "An audio AI bot that uses the OpenAI block to generate responses based on the user input.",
+  "templates.modal.other.audioChatGpt.name": "Audio ChatGPT",
+  "templates.modal.other.basicChatGpt.description": "A bot that uses the ChatGPT model to generate responses based on the user input.",
+  "templates.modal.other.basicChatGpt.name": "Basic ChatGPT",
+  "templates.modal.other.chatGptPersonas.description": "A bot that uses the ChatGPT model to generate responses based on the user input and the selected persona.",
+  "templates.modal.other.chatGptPersonas.name": "ChatGPT Personas",
+  "templates.modal.other.digitalProductPayment.description": "A bot that allows you to sell digital products (ebooks, courses, etc.) and only provide the content after the payment is confirmed.",
+  "templates.modal.other.digitalProductPayment.name": "Digital Product Payment",
+  "templates.modal.other.movieRecommendation.description": "A bot that recommends movies based on the user preferences.",
+  "templates.modal.other.movieRecommendation.name": "Movie Recommendation",
+  "templates.modal.other.openAiConditions.description": "This is an example of how you can use the OpenAI block to take smart decisions based on the user input and redirect the conversation to the right path.",
+  "templates.modal.other.openAiConditions.name": "OpenAI Conditions",
+  "templates.modal.product.customerSupport.description": "A bot whose job is to collect user feedback: questions, bugs and feature requests.",
+  "templates.modal.product.customerSupport.name": "Customer Support",
+  "templates.modal.product.faq.description": "A bot that answers frequently asked questions about your product or service.",
+  "templates.modal.product.faq.name": "FAQ",
+  "templates.modal.product.npsSurvey.description": "A simple NPS survey to measure your customer satisfaction and improve your product.",
+  "templates.modal.product.npsSurvey.name": "NPS Survey",
+  "templates.modal.product.userOnboarding.description": "A bot that asks for new user information before he start using your product.",
+  "templates.modal.product.userOnboarding.name": "User Onboarding",
   "templates.modal.useTemplateButton.label": "Use this template",
+  "templates.modal.useTemplateButton.labelt": "Use this templatet",
   "timeSince.days": "{count}d ago",
   "timeSince.hours": "{count}h ago",
   "timeSince.minutes": "{count}m ago",

apps/builder/src/i18n/fr.json

@@ -261,10 +261,44 @@
   "templates.buttons.heading": "Créer un nouveau typebot",
   "templates.buttons.importFileButton.label": "Importer un fichier",
   "templates.importFromFileButon.toastError.description": "Échec de l'analyse du fichier. Es-tu sûr que c'est un typebot ?",
+  "templates.modal.marketing.insuranceOffer.description": "Tu représentes une compagnie d'assurance pour chiens. Ce bot te permet de collecter des informations sur le chien et de fournir un devis.",
+  "templates.modal.marketing.insuranceOffer.name": "Offre d'Assurance",
+  "templates.modal.marketing.leadGenWithAi.description": "Tu représentes une agence de marketing et ce bot te permet de générer de nouveaux leads intéressés par tes services. Un bloc IA est utilisé pour approfondir les besoins de l'utilisateur.",
+  "templates.modal.marketing.leadGenWithAi.name": "Lead gen avec IA",
+  "templates.modal.marketing.leadGeneration.description": "Tu représentes une agence de marketing et ce bot te permet de générer de nouveaux leads intéressés par tes services.",
+  "templates.modal.marketing.leadGeneration.name": "Génération de Leads",
+  "templates.modal.marketing.leadMagnet.description": "Fournis un contenu gratuit à tes prospects en échange de leurs contact.",
+  "templates.modal.marketing.leadMagnet.name": "Lead magnet",
+  "templates.modal.marketing.leadScoring.description": "Calcule un score en fonction de questions de qualification des leads pour automatiquement classer tes prospects.",
+  "templates.modal.marketing.leadScoring.name": "Scoring de Leads",
+  "templates.modal.marketing.productRecommendation.description": "Näak est une entreprise qui vend des barres énergétiques, des mélanges d'hydratation et des produits de récupération. Ce bot aide un visiteur à choisir le bon produit. Il t'aide à qualifier votre lead et à fournir une recommandation personnalisée.",
+  "templates.modal.marketing.productRecommendation.name": "Recommandation de Produit",
+  "templates.modal.marketing.quiz.description": "Un quiz amusant pour interagir avec tes utilisateurs et collecter leurs e-mails.",
+  "templates.modal.marketing.quiz.name": "Quiz",
   "templates.modal.menuHeading.marketing": "Marketing",
   "templates.modal.menuHeading.new.tag": "Nouveau",
   "templates.modal.menuHeading.other": "Autre",
   "templates.modal.menuHeading.product": "Produit",
+  "templates.modal.other.audioChatGpt.description": "Un bot audio IA qui utilise le bloc OpenAI pour générer des réponses basées sur les entrées de l'utilisateur.",
+  "templates.modal.other.audioChatGpt.name": "ChatGPT Audio",
+  "templates.modal.other.basicChatGpt.description": "Un bot qui utilise le modèle ChatGPT pour générer des réponses basées sur les entrées de l'utilisateur.",
+  "templates.modal.other.basicChatGpt.name": "ChatGPT Basique",
+  "templates.modal.other.chatGptPersonas.description": "Un bot qui utilise le modèle ChatGPT pour générer des réponses basées sur les entrées de l'utilisateur et la persona sélectionnée.",
+  "templates.modal.other.chatGptPersonas.name": "Personas ChatGPT",
+  "templates.modal.other.digitalProductPayment.description": "Un bot qui te permet de vendre des produits numériques (ebooks, cours, etc.) et de fournir le contenu uniquement après la confirmation du paiement.",
+  "templates.modal.other.digitalProductPayment.name": "Paiement Produit Numérique",
+  "templates.modal.other.movieRecommendation.description": "Un bot qui recommande des films en fonction des préférences de l'utilisateur.",
+  "templates.modal.other.movieRecommendation.name": "Recommandation de Film",
+  "templates.modal.other.openAiConditions.description": "Ceci est un exemple de comment tu peux utiliser le bloc OpenAI pour prendre des décisions intelligentes basées sur les entrées de l'utilisateur et rediriger la conversation dans la bonne direction.",
+  "templates.modal.other.openAiConditions.name": "Conditions OpenAI",
+  "templates.modal.product.customerSupport.description": "Un bot dont le travail est de collecter les retours des utilisateurs : questions, bugs et demandes de fonctionnalités.",
+  "templates.modal.product.customerSupport.name": "Support Client",
+  "templates.modal.product.faq.description": "Un bot qui répond aux questions fréquemment posées sur ton produit ou service.",
+  "templates.modal.product.faq.name": "FAQ",
+  "templates.modal.product.npsSurvey.description": "Une simple enquête NPS pour mesurer la satisfaction de tes clients et améliorer ton produit.",
+  "templates.modal.product.npsSurvey.name": "Enquête NPS",
+  "templates.modal.product.userOnboarding.description": "Un bot qui demande des informations sur les nouveaux utilisateurs avant qu'ils commencent à utiliser ton produit.",
+  "templates.modal.product.userOnboarding.name": "Intégration Utilisateur",
   "templates.modal.useTemplateButton.label": "Utiliser ce modèle",
   "typebots.defaultName": "Mon typebot",
   "upgrade": "Upgrade",

apps/builder/src/i18n/pt-BR.json

@@ -270,10 +270,44 @@
   "templates.buttons.heading": "Criar um novo typebot",
   "templates.buttons.importFileButton.label": "Importar um arquivo",
   "templates.importFromFileButon.toastError.description": "Falha ao analisar o arquivo. Tem certeza de que é um typebot?",
+  "templates.modal.marketing.insuranceOffer.description": "Você é uma seguradora para cães. Este bot permite coletar informações sobre o cachorro e fornecer um orçamento.",
+  "templates.modal.marketing.insuranceOffer.name": "Oferta de Seguro",
+  "templates.modal.marketing.leadGenWithAi.description": "Você é uma agência de marketing e este bot permite gerar novos leads interessados em seus serviços. Um bloco de IA é usado para aprofundar nas necessidades do usuário.",
+  "templates.modal.marketing.leadGenWithAi.name": "Geração de Leads com IA",
+  "templates.modal.marketing.leadGeneration.description": "Você é uma agência de marketing e este bot lhe permite gerar novos leads interessados em seus serviços.",
+  "templates.modal.marketing.leadGeneration.name": "Geração de Leads",
+  "templates.modal.marketing.leadMagnet.description": "Forneça conteúdo gratuito aos seus clientes potenciais em troca de suas informações de contato.",
+  "templates.modal.marketing.leadMagnet.name": "Imã de Leads",
+  "templates.modal.marketing.leadScoring.description": "Calcule uma pontuação junto com perguntas de qualificação de leads para classificar seus novos clientes potenciais.",
+  "templates.modal.marketing.leadScoring.name": "Pontuação de Leads",
+  "templates.modal.marketing.productRecommendation.description": "A Näak é uma empresa que comercializa barras energéticas, mix de hidratação e produtos de recuperação. Este bot ajuda o visitante a escolher o produto certo. Ajuda você a qualificar seu lead e fornecer uma recomendação personalizada.",
+  "templates.modal.marketing.productRecommendation.name": "Recomendação de Produto",
+  "templates.modal.marketing.quiz.description": "Um teste divertido para interagir com seus usuários e coletar seus e-mails.",
+  "templates.modal.marketing.quiz.name": "Quiz",
   "templates.modal.menuHeading.marketing": "Marketing",
   "templates.modal.menuHeading.new.tag": "Novo",
   "templates.modal.menuHeading.other": "Outros",
   "templates.modal.menuHeading.product": "Produto",
+  "templates.modal.other.audioChatGpt.description": "Um bot de IA de áudio que usa o bloco da OpenAI para gerar respostas com base nas respostas do usuário.",
+  "templates.modal.other.audioChatGpt.name": "ChatGPT em Áudio",
+  "templates.modal.other.basicChatGpt.description": "Um bot que usa o modelo ChatGPT para gerar respostas com base nas respostas do usuário.",
+  "templates.modal.other.basicChatGpt.name": "ChatGPT Básico",
+  "templates.modal.other.chatGptPersonas.description": "Um bot que usa o modelo ChatGPT para gerar respostas com base nas respostas do usuário e na persona selecionada.",
+  "templates.modal.other.chatGptPersonas.name": "ChatGPT Personas",
+  "templates.modal.other.digitalProductPayment.description": "Um bot que permite vender produtos digitais (ebooks, cursos, etc.) e só disponibilizar o conteúdo após a confirmação do pagamento.",
+  "templates.modal.other.digitalProductPayment.name": "Pagamento de Produtos Digitais",
+  "templates.modal.other.movieRecommendation.description": "Um bot que recomenda filmes com base nas preferências do usuário.",
+  "templates.modal.other.movieRecommendation.name": "Recomendação de Filmes",
+  "templates.modal.other.openAiConditions.description": "Este é um exemplo de como você pode usar o bloco OpenAI para tomar decisões inteligentes com base nas respostas do usuário e redirecionar a conversa para o caminho certo.",
+  "templates.modal.other.openAiConditions.name": "Condições OpenAI",
+  "templates.modal.product.customerSupport.description": "Um bot cujo trabalho é coletar feedback do usuário: perguntas, bugs e solicitações de funcionalidades.",
+  "templates.modal.product.customerSupport.name": "Suporte ao Cliente",
+  "templates.modal.product.faq.description": "Um bot que responde perguntas frequentes sobre seu produto ou serviço.",
+  "templates.modal.product.faq.name": "FAQ",
+  "templates.modal.product.npsSurvey.description": "Uma pesquisa NPS simples para medir a satisfação do cliente e aprimorar seu produto.",
+  "templates.modal.product.npsSurvey.name": "Pesquisa NPS",
+  "templates.modal.product.userOnboarding.description": "Um bot que solicita informações de novos usuários antes de começar a usar seu produto.",
+  "templates.modal.product.userOnboarding.name": "Onboarding de Usuário",
   "templates.modal.useTemplateButton.label": "Usar esse modelo",
   "typebots.defaultName": "Meu typebot",
   "upgrade": "Upgrade",