🚸 Improve support accessibility

Add documentation button in board menu and hide the support bubble in the editor. Makes it accessible only by clicking the "Help" button

apps/builder/src/features/editor/components/BoardMenuButton.tsx

@@ -11,6 +11,7 @@ import {
 } from '@chakra-ui/react'
 import assert from 'assert'
 import {
+  BookIcon,
   DownloadIcon,
   MoreVerticalIcon,
   SettingsIcon,
@@ -31,14 +32,9 @@ export const BoardMenuButton = (props: FlexProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   useEffect(() => {
-    if (
-      user &&
-      isNotDefined(user.graphNavigation) &&
-      isNotDefined(query.isFirstBot)
-    )
+    if (isNotDefined(user?.graphNavigation) && isNotDefined(query.isFirstBot))
       onOpen()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [onOpen, query.isFirstBot, user?.graphNavigation])
 
   const downloadFlow = () => {
     assert(typebot)
@@ -56,6 +52,10 @@ export const BoardMenuButton = (props: FlexProps) => {
     linkElement.click()
     setIsDownloading(false)
   }
+
+  const redirectToDocumentation = () =>
+    window.open('https://docs.typebot.io/get-started/overview', '_blank')
+
   return (
     <Flex
       bgColor={useColorModeValue('white', 'gray.900')}
@@ -72,6 +72,9 @@ export const BoardMenuButton = (props: FlexProps) => {
           bgColor={useColorModeValue('white', undefined)}
         />
         <MenuList>
+          <MenuItem icon={<BookIcon />} onClick={redirectToDocumentation}>
+            Documentation
+          </MenuItem>
           <MenuItem icon={<SettingsIcon />} onClick={onOpen}>
             Editor settings
           </MenuItem>

apps/builder/src/features/editor/components/TypebotHeader.tsx

@@ -7,6 +7,7 @@ import {
   Spinner,
   Text,
   useColorModeValue,
+  useDisclosure,
 } from '@chakra-ui/react'
 import {
   BuoyIcon,
@@ -18,9 +19,7 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { isDefined, isNotDefined } from '@typebot.io/lib'
 import { EditableTypebotName } from './EditableTypebotName'
-import { open as openSupportBubble } from '@typebot.io/js'
 import Link from 'next/link'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
 import { useUndoShortcut } from '@/hooks/useUndoShortcut'
 import { useDebouncedCallback } from 'use-debounce'
@@ -29,6 +28,8 @@ import { PublishButton } from '@/features/publish/components/PublishButton'
 import { headerHeight } from '../constants'
 import { RightPanel, useEditor } from '../providers/EditorProvider'
 import { useTypebot } from '../providers/TypebotProvider'
+import { SupportBubble } from '@/components/SupportBubble'
+import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 export const TypebotHeader = () => {
   const router = useRouter()
@@ -49,6 +50,7 @@ export const TypebotHeader = () => {
   const hideUndoShortcutTooltipLater = useDebouncedCallback(() => {
     setUndoShortcutTooltipOpen(false)
   }, 1000)
+  const { isOpen, onOpen } = useDisclosure()
 
   const handleNameSubmit = (name: string) => updateTypebot({ name })
 
@@ -70,7 +72,7 @@ export const TypebotHeader = () => {
 
   const handleHelpClick = () => {
     isCloudProdInstance
-      ? openSupportBubble()
+      ? onOpen()
       : window.open('https://docs.typebot.io', '_blank')
   }
 
@@ -86,6 +88,7 @@ export const TypebotHeader = () => {
       bgColor={useColorModeValue('white', 'gray.900')}
       flexShrink={0}
     >
+      {isOpen && <SupportBubble autoShowDelay={0} />}
       <HStack
         display={['none', 'flex']}
         pos={{ base: 'absolute', xl: 'static' }}