feat(dashboard): ✨ Add lead generation template

While creating the template I also made sure to fix and improve everything I stumble upon

apps/builder/components/templates/ImportFileMenuItem.tsx

@@ -0,0 +1,51 @@
+import { chakra, MenuItem, MenuItemProps, useToast } from '@chakra-ui/react'
+import { FileIcon } from 'assets/icons'
+import { Typebot } from 'models'
+import React, { ChangeEvent, useState } from 'react'
+import { readFile } from 'services/utils'
+
+type Props = {
+  onNewTypebot: (typebot: Typebot) => void
+} & MenuItemProps
+
+export const ImportFromFileMenuItem = ({ onNewTypebot, ...props }: Props) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target?.files) return
+    setIsLoading(true)
+    const file = e.target.files[0]
+    const fileContent = await readFile(file)
+    try {
+      onNewTypebot(JSON.parse(fileContent))
+    } catch (err) {
+      console.error(err)
+      toast({ description: 'Failed to parse the file' })
+    }
+    setIsLoading(false)
+  }
+
+  return (
+    <>
+      <chakra.input
+        type="file"
+        id="file-input"
+        display="none"
+        onChange={handleInputChange}
+        accept=".json"
+      />
+      <MenuItem
+        icon={<FileIcon />}
+        id="file-input"
+        isLoading={isLoading}
+        {...props}
+      >
+        {props.children}
+      </MenuItem>
+    </>
+  )
+}