🚸 (onboarding) Introduce new onboarding floating videos mechanism

apps/builder/src/components/icons.tsx

@@ -678,3 +678,20 @@ export const BracesIcon = (props: IconProps) => (
     <path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" />
   </Icon>
 )
+
+export const VideoPopoverIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 21 21" {...featherIconsBaseProps} {...props}>
+    <path
+      d="M6.9 18.0079C8.80858 18.9869 11.0041 19.2521 13.0909 18.7556C15.1777 18.2592 17.0186 17.0337 18.2818 15.3C19.545 13.5664 20.1474 11.4386 19.9806 9.30002C19.8137 7.16147 18.8886 5.15283 17.3718 3.63605C15.855 2.11928 13.8464 1.19411 11.7078 1.02728C9.56929 0.860441 7.44147 1.46291 5.70782 2.72611C3.97417 3.98931 2.74869 5.83017 2.25222 7.91697C1.75575 10.0038 2.02094 12.1993 3 14.1079L1 20.0079L6.9 18.0079Z"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 6L15 10L9 14V6Z"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Icon>
+)

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

@@ -18,27 +18,19 @@ import {
   SettingsIcon,
 } from '@/components/icons'
 import { useTypebot } from '../providers/TypebotProvider'
-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'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useRouter } from 'next/router'
 import { RightPanel, useEditor } from '../providers/EditorProvider'
 
 export const BoardMenuButton = (props: StackProps) => {
-  const { query } = useRouter()
   const { typebot, currentUserMode } = useTypebot()
-  const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslate()
   const { setRightPanel } = useEditor()
 
-  useEffect(() => {
-    if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
-  }, [onOpen, query.isFirstBot, user, user?.graphNavigation])
-
   const downloadFlow = () => {
     assert(typebot)
     setIsDownloading(true)

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

@@ -8,7 +8,6 @@ import {
 import { useTypebot } from '../providers/TypebotProvider'
 import { BlocksSideBar } from './BlocksSideBar'
 import { BoardMenuButton } from './BoardMenuButton'
-import { GettingStartedModal } from './GettingStartedModal'
 import { PreviewDrawer } from '@/features/preview/components/PreviewDrawer'
 import { TypebotHeader } from './TypebotHeader'
 import { Graph } from '@/features/graph/components/Graph'
@@ -19,6 +18,7 @@ import { TypebotNotFoundPage } from './TypebotNotFoundPage'
 import { SuspectedTypebotBanner } from './SuspectedTypebotBanner'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { VariablesDrawer } from '@/features/preview/components/VariablesDrawer'
+import { VideoOnboardingFloatingWindow } from '@/features/onboarding/components/VideoOnboardingFloatingWindow'
 
 export const EditorPage = () => {
   const { typebot, currentUserMode, is404 } = useTypebot()
@@ -32,11 +32,12 @@ export const EditorPage = () => {
   const isSuspicious = typebot?.riskLevel === 100 && !workspace?.isVerified
 
   if (is404) return <TypebotNotFoundPage />
+
   return (
     <EditorProvider>
       <Seo title={typebot?.name ? `${typebot.name} | Editor` : 'Editor'} />
       <Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
-        <GettingStartedModal />
+        <VideoOnboardingFloatingWindow type="editor" />
         {isSuspicious && <SuspectedTypebotBanner typebotId={typebot.id} />}
         <TypebotHeader />
         <Flex

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

@@ -60,7 +60,7 @@ export const TypebotHeader = () => {
       justify="center"
       align="center"
       h={`${headerHeight}px`}
-      zIndex={100}
+      zIndex={1}
       pos="relative"
       bgColor={headerBgColor}
       flexShrink={0}

apps/builder/src/features/folders/components/CreateBotButton.tsx

@@ -8,17 +8,15 @@ import { useTypebotDnd } from '../TypebotDndProvider'
 
 export const CreateBotButton = ({
   folderId,
-  isFirstBot,
   ...props
-}: { folderId?: string; isFirstBot: boolean } & ButtonProps) => {
+}: { folderId?: string } & ButtonProps) => {
   const { t } = useTranslate()
   const router = useRouter()
   const { draggedTypebot } = useTypebotDnd()
 
   const handleClick = () =>
     router.push(
       `/typebots/create?${stringify({
-        isFirstBot: !isFirstBot ? undefined : isFirstBot,
         folderId,
       })}`
     )

apps/builder/src/features/folders/components/FolderContent.tsx

@@ -187,7 +187,6 @@ export const FolderContent = ({ folder }: Props) => {
               <CreateBotButton
                 folderId={folder?.id}
                 isLoading={isTypebotLoading}
-                isFirstBot={typebots?.length === 0 && folder === null}
               />
             )}
             {isFolderLoading && <ButtonSkeleton />}

apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx

@@ -8,17 +8,26 @@ import {
 } from '@chakra-ui/react'
 import { BlockWithOptions } from '@typebot.io/schemas'
 import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
-import { useForgedBlock } from '@/features/forge/hooks/useForgedBlock'
 import { useTranslate } from '@tolgee/react'
+import { VideoOnboardingPopover } from '@/features/onboarding/components/VideoOnboardingPopover'
+import { forgedBlocks } from '@typebot.io/forge-repository/definitions'
 
 type Props = {
   blockType: BlockWithOptions['type']
+  blockDef?: (typeof forgedBlocks)[keyof typeof forgedBlocks]
+  isVideoOnboardingItemDisplayed: boolean
   onExpandClick: () => void
+  onVideoOnboardingClick: () => void
 }
 
-export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
+export const SettingsHoverBar = ({
+  blockType,
+  blockDef,
+  isVideoOnboardingItemDisplayed,
+  onExpandClick,
+  onVideoOnboardingClick,
+}: Props) => {
   const { t } = useTranslate()
-  const { blockDef } = useForgedBlock(blockType)
   const helpDocUrl = getHelpDocUrl(blockType, blockDef)
   return (
     <HStack
@@ -43,6 +52,10 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
           as={Link}
           leftIcon={<BuoyIcon />}
           borderLeftRadius="none"
+          borderRightRadius={
+            isVideoOnboardingItemDisplayed ? 'none' : undefined
+          }
+          borderRightWidth={isVideoOnboardingItemDisplayed ? '1px' : undefined}
           size="xs"
           variant="ghost"
           href={helpDocUrl}
@@ -51,6 +64,13 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
           {t('help')}
         </Button>
       )}
+      {isVideoOnboardingItemDisplayed && (
+        <VideoOnboardingPopover.TriggerIconButton
+          onClick={onVideoOnboardingClick}
+          size="xs"
+          borderLeftRadius="none"
+        />
+      )}
     </HStack>
   )
 }