🚸 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/components/SupportBubble.tsx

@@ -3,16 +3,14 @@ import { useUser } from '@/features/account/hooks/useUser'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
 import { Bubble } from '@typebot.io/react'
-import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import { planToReadable } from '@/features/billing/helpers/planToReadable'
+import { BubbleProps } from '@typebot.io/js'
 
-export const SupportBubble = () => {
+export const SupportBubble = (props: Omit<BubbleProps, 'typebot'>) => {
   const { typebot } = useTypebot()
   const { user } = useUser()
   const { workspace } = useWorkspace()
 
-  if (!isCloudProdInstance) return null
-
   return (
     <Bubble
       apiHost="https://viewer.typebot.io"
@@ -30,6 +28,7 @@ export const SupportBubble = () => {
           backgroundColor: '#fff',
         },
       }}
+      {...props}
     />
   )
 }

apps/builder/src/components/icons.tsx

@@ -621,3 +621,10 @@ export const SmileIcon = (props: IconProps) => (
     <line x1="15" y1="9" x2="15.01" y2="9"></line>
   </Icon>
 )
+
+export const BookIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+  </Icon>
+)

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

apps/builder/src/pages/_app.tsx

@@ -18,6 +18,7 @@ import { NewVersionPopup } from '@/components/NewVersionPopup'
 import { I18nProvider } from '@/locales'
 import { TypebotProvider } from '@/features/editor/providers/TypebotProvider'
 import { WorkspaceProvider } from '@/features/workspace/WorkspaceProvider'
+import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 
 const { ToastContainer, toast } = createStandaloneToast(customTheme)
 
@@ -58,7 +59,9 @@ const App = ({ Component, pageProps }: AppProps) => {
               <TypebotProvider typebotId={typebotId}>
                 <WorkspaceProvider typebotId={typebotId}>
                   <Component {...pageProps} />
+                  {!pathname.endsWith('edit') && !isCloudProdInstance && (
                     <SupportBubble />
+                  )}
                   <NewVersionPopup />
                 </WorkspaceProvider>
               </TypebotProvider>

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/constants.ts

@@ -32,4 +32,6 @@ export const defaultBubbleProps: BubbleProps = {
   onOpen: undefined,
   theme: undefined,
   previewMessage: undefined,
+  onPreviewMessageClick: undefined,
+  autoShowDelay: undefined,
 }

packages/embeds/js/src/features/bubble/components/Bubble.tsx

@@ -28,6 +28,7 @@ export const Bubble = (props: BubbleProps) => {
     'previewMessage',
     'onPreviewMessageClick',
     'theme',
+    'autoShowDelay',
   ])
   const [prefilledVariables, setPrefilledVariables] = createSignal(
     // eslint-disable-next-line solid/reactivity
@@ -47,12 +48,19 @@ export const Bubble = (props: BubbleProps) => {
 
   onMount(() => {
     window.addEventListener('message', processIncomingEvent)
-    const autoShowDelay = bubbleProps.previewMessage?.autoShowDelay
+    const autoShowDelay = bubbleProps.autoShowDelay
+    const previewMessageAutoShowDelay =
+      bubbleProps.previewMessage?.autoShowDelay
     if (isDefined(autoShowDelay)) {
       setTimeout(() => {
-        showMessage()
+        openBot()
       }, autoShowDelay)
     }
+    if (isDefined(previewMessageAutoShowDelay)) {
+      setTimeout(() => {
+        showMessage()
+      }, previewMessageAutoShowDelay)
+    }
   })
 
   onCleanup(() => {

packages/embeds/js/src/features/bubble/types.ts

@@ -1,6 +1,7 @@
 export type BubbleParams = {
   theme?: BubbleTheme
   previewMessage?: PreviewMessageParams
+  autoShowDelay?: number
 }
 
 export type BubbleTheme = {

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",