feat(inputs): ✨ Add Export flow menu button

apps/builder/components/board/Board.tsx

@@ -6,6 +6,7 @@ import { StepTypesList } from './StepTypesList'
 import { PreviewDrawer } from './preview/PreviewDrawer'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { GraphProvider } from 'contexts/GraphContext'
+import { BoardMenuButton } from './BoardMenuButton'
 
 export const Board = () => {
   const { rightPanel } = useEditor()
@@ -16,6 +17,7 @@ export const Board = () => {
         <GraphProvider>
           <Graph flex="1" />
           {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
+          <BoardMenuButton pos="absolute" right="20px" top="20px" />
         </GraphProvider>
       </DndContext>
     </Flex>

apps/builder/components/board/BoardMenuButton.tsx

@@ -0,0 +1,49 @@
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuItem,
+  MenuList,
+} from '@chakra-ui/react'
+import { DownloadIcon, MoreVerticalIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+import React, { useState } from 'react'
+import { parseDefaultPublicId } from 'services/typebots'
+
+export const BoardMenuButton = (props: MenuButtonProps) => {
+  const { typebot } = useTypebot()
+  const [isDownloading, setIsDownloading] = useState(false)
+
+  const downloadFlow = () => {
+    if (!typebot) return
+    setIsDownloading(true)
+    const data =
+      'data:application/json;charset=utf-8,' +
+      encodeURIComponent(JSON.stringify(typebot))
+    const fileName = `typebot-export-${parseDefaultPublicId(
+      typebot.name,
+      typebot.id
+    )}.json`
+    const linkElement = document.createElement('a')
+    linkElement.setAttribute('href', data)
+    linkElement.setAttribute('download', fileName)
+    linkElement.click()
+    setIsDownloading(false)
+  }
+  return (
+    <Menu>
+      <MenuButton
+        as={IconButton}
+        icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
+        isLoading={isDownloading}
+        {...props}
+      />
+      <MenuList>
+        <MenuItem icon={<DownloadIcon />} onClick={downloadFlow}>
+          Export flow
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}