🚸 (editor) Add graph gesture notification

apps/builder/src/features/account/UserProvider.tsx

@@ -2,7 +2,7 @@ import { signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { createContext, ReactNode, useEffect, useState } from 'react'
 import { isDefined, isNotDefined } from '@typebot.io/lib'
-import { User } from '@typebot.io/prisma'
+import { User } from '@typebot.io/schemas'
 import { setUser as setSentryUser } from '@sentry/nextjs'
 import { useToast } from '@/hooks/useToast'
 import { updateUserQuery } from './queries/updateUserQuery'

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

@@ -17,25 +17,17 @@ import {
   SettingsIcon,
 } from '@/components/icons'
 import { useTypebot } from '../providers/TypebotProvider'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { EditorSettingsModal } from './EditorSettingsModal'
 import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPublicId'
 import { useTranslate } from '@tolgee/react'
 
 export const BoardMenuButton = (props: FlexProps) => {
-  const { query } = useRouter()
   const { typebot } = useTypebot()
-  const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslate()
 
-  useEffect(() => {
-    if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
-  }, [onOpen, query.isFirstBot, user, user?.graphNavigation])
-
   const downloadFlow = () => {
     assert(typebot)
     setIsDownloading(true)
@@ -54,7 +46,7 @@ export const BoardMenuButton = (props: FlexProps) => {
   }
 
   const redirectToDocumentation = () =>
-    window.open('https://docs.typebot.io/get-started/overview', '_blank')
+    window.open('https://docs.typebot.io/editor/graph', '_blank')
 
   return (
     <Flex

apps/builder/src/features/graph/components/Graph.tsx

@@ -29,6 +29,10 @@ import { useGroupsStore } from '../hooks/useGroupsStore'
 import { useShallow } from 'zustand/react/shallow'
 import { projectMouse } from '../helpers/projectMouse'
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
+import { useUser } from '@/features/account/hooks/useUser'
+import { graphGestureNotficationKey } from '@typebot.io/schemas/features/user/constants'
+import { toast } from 'sonner'
+import { LightBulbIcon } from '@/components/icons'
 
 const maxScale = 2
 const minScale = 0.3
@@ -55,6 +59,7 @@ export const Graph = ({
     setDraggedItem,
   } = useBlockDnd()
   const { pasteGroups, createGroup } = useTypebot()
+  const { user, updateUser } = useUser()
   const {
     isReadOnly,
     setGraphPosition: setGlobalGraphPosition,
@@ -184,6 +189,26 @@ export const Graph = ({
       setLastMouseClickPosition(
         projectMouse({ x: e.clientX, y: e.clientY }, graphPosition)
       )
+    } else if (
+      user &&
+      !user?.displayedInAppNotifications?.[graphGestureNotficationKey]
+    ) {
+      toast.info('To move the graph using your mouse, hold the Space bar', {
+        action: {
+          label: 'More info',
+          onClick: () => {
+            window.open('https://docs.typebot.io/editor/graph', '_blank')
+          },
+        },
+        duration: 30000,
+        icon: <LightBulbIcon w="20px" h="20px" />,
+      })
+      updateUser({
+        displayedInAppNotifications: {
+          ...user.displayedInAppNotifications,
+          [graphGestureNotficationKey]: true,
+        },
+      })
     }
     setSelectBoxCoordinates(undefined)
     setOpenedBlockId(undefined)