chore: Tour Updates

Author: adithyaakrishna

apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts

@@ -8,13 +8,15 @@ export const navTourSteps: Step[] = [
       'Your starting point. Describe what you want to build in plain language or pick a template to get started.',
     placement: 'right',
     disableBeacon: true,
+    spotlightPadding: 0,
   },
   {
     target: '[data-item-id="search"]',
     title: 'Search',
     content: 'Quickly find workflows, blocks, and tools. Use Cmd+K to open it from anywhere.',
     placement: 'right',
     disableBeacon: true,
+    spotlightPadding: 0,
   },
   {
     target: '[data-item-id="tables"]',

apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx

@@ -157,6 +157,7 @@ export function NavTour() {
         callback={handleCallback}
         continuous
         disableScrolling
+        disableScrollParentFix
         disableOverlayClose
         spotlightPadding={4}
         tooltipComponent={NavTooltipAdapter}
@@ -180,14 +181,18 @@ export function NavTour() {
           spotlight: {
             backgroundColor: 'transparent',
             border: '1px solid rgba(255, 255, 255, 0.1)',
-            borderRadius: 6,
+            borderRadius: 8,
             boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
+            position: 'fixed' as React.CSSProperties['position'],
             transition:
               'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           },
           overlay: {
             backgroundColor: 'transparent',
             mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
+            position: 'fixed' as React.CSSProperties['position'],
+            height: '100%',
+            overflow: 'visible',
           },
         }}
       />

apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts

@@ -87,25 +87,13 @@ export function useTour({
   const hasAutoStarted = useRef(false)
   const retriggerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const prevOverflowRef = useRef('')
-
-  /** Lock page scroll to prevent scrollbar jitter from Joyride's overlay */
-  const lockScroll = useCallback(() => {
-    prevOverflowRef.current = document.documentElement.style.overflow
-    document.documentElement.style.overflow = 'hidden'
-  }, [])
-
-  const unlockScroll = useCallback(() => {
-    document.documentElement.style.overflow = prevOverflowRef.current
-  }, [])
 
   const stopTour = useCallback(() => {
     setRun(false)
     setIsTooltipVisible(true)
     setIsEntrance(true)
-    unlockScroll()
     markTourCompleted(storageKey)
-  }, [storageKey, unlockScroll])
+  }, [storageKey])
 
   /** Transition to a new step with a coordinated fade-out/fade-in */
   const transitionToStep = useCallback(
@@ -115,7 +103,7 @@ export function useTour({
         return
       }
 
-      /** Fade out the current tooltip */
+      /** Hide tooltip during transition */
       setIsTooltipVisible(false)
 
       if (transitionTimerRef.current) {
@@ -129,7 +117,7 @@ export function useTour({
 
         /**
          * Wait for the browser to process the Radix Popover repositioning
-         * before fading in the tooltip at the new position.
+         * before showing the tooltip at the new position.
          */
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -148,12 +136,17 @@ export function useTour({
 
     const timer = setTimeout(() => {
       if (!isTourCompleted(storageKey)) {
-        lockScroll()
         setStepIndex(0)
         setIsEntrance(true)
-        setIsTooltipVisible(true)
+        setIsTooltipVisible(false)
         setRun(true)
         logger.info(`Auto-starting ${tourName}`)
+
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsTooltipVisible(true)
+          })
+        })
       }
     }, autoStartDelay)
 
@@ -173,14 +166,24 @@ export function useTour({
         clearTimeout(retriggerTimerRef.current)
       }
 
+      /**
+       * Start with the tooltip hidden so Joyride can mount, find the
+       * target element, and position its overlay/spotlight before the
+       * tooltip card appears.
+       */
       retriggerTimerRef.current = setTimeout(() => {
         retriggerTimerRef.current = null
-        lockScroll()
         setStepIndex(0)
         setIsEntrance(true)
-        setIsTooltipVisible(true)
+        setIsTooltipVisible(false)
         setRun(true)
         logger.info(`${tourName} triggered via event`)
+
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsTooltipVisible(true)
+          })
+        })
       }, 50)
     }
 
@@ -198,9 +201,8 @@ export function useTour({
       if (transitionTimerRef.current) {
         clearTimeout(transitionTimerRef.current)
       }
-      unlockScroll()
     }
-  }, [unlockScroll])
+  }, [])
 
   const handleCallback = useCallback(
     (data: CallBackProps) => {

apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps.ts

@@ -10,12 +10,13 @@ export const workflowTourSteps: Step[] = [
     disableBeacon: true,
   },
   {
-    target: '[data-tour="command-list"]',
-    title: 'Quick Actions',
+    target: '[data-tab-button="copilot"]',
+    title: 'AI Copilot',
     content:
-      'Keyboard shortcuts to get started fast. Press Cmd+K to search blocks, or Cmd+Y to browse templates.',
-    placement: 'right',
+      'Build and debug workflows using natural language. Describe what you want and Copilot creates the blocks for you.',
+    placement: 'bottom',
     disableBeacon: true,
+    spotlightPadding: 0,
   },
   {
     target: '[data-tab-button="toolbar"]',
@@ -24,14 +25,7 @@ export const workflowTourSteps: Step[] = [
       'Browse all available blocks and triggers. Drag them onto the canvas to build your workflow step by step.',
     placement: 'bottom',
     disableBeacon: true,
-  },
-  {
-    target: '[data-tab-button="copilot"]',
-    title: 'AI Copilot',
-    content:
-      'Build and debug workflows using natural language. Describe what you want and Copilot creates the blocks for you.',
-    placement: 'bottom',
-    disableBeacon: true,
+    spotlightPadding: 0,
   },
   {
     target: '[data-tab-button="editor"]',
@@ -40,12 +34,13 @@ export const workflowTourSteps: Step[] = [
       'Click any block on the canvas to configure it here. Set inputs, credentials, and fine-tune behavior.',
     placement: 'bottom',
     disableBeacon: true,
+    spotlightPadding: 0,
   },
   {
     target: '[data-tour="deploy-run"]',
-    title: 'Run & Deploy',
+    title: 'Deploy & Run',
     content:
-      'Hit Run to test your workflow. When ready, Deploy it as an API, webhook, schedule, or chat widget.',
+      'Deploy your workflow as an API, webhook, schedule, or chat widget. Then hit Run to test it out.',
     placement: 'bottom',
     disableBeacon: true,
   },
@@ -55,6 +50,7 @@ export const workflowTourSteps: Step[] = [
     content:
       'Switch between pointer and hand mode, undo or redo changes, and fit the canvas to your view.',
     placement: 'top',
+    spotlightPadding: 0,
     disableBeacon: true,
   },
 ]

apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx

@@ -1,15 +1,12 @@
 'use client'
 
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
 import dynamic from 'next/dynamic'
 import type { TooltipRenderProps } from 'react-joyride'
 import { TourTooltip } from '@/components/emcn'
 import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
 import { workflowTourSteps } from '@/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps'
 
-const logger = createLogger('WorkflowTour')
-
 const Joyride = dynamic(() => import('react-joyride'), {
   ssr: false,
 })
@@ -158,8 +155,9 @@ export function WorkflowTour() {
         callback={handleCallback}
         continuous
         disableScrolling
+        disableScrollParentFix
         disableOverlayClose
-        spotlightPadding={4}
+        spotlightPadding={1}
         tooltipComponent={WorkflowTooltipAdapter}
         floaterProps={{
           disableAnimation: true,
@@ -183,12 +181,16 @@ export function WorkflowTour() {
             border: '1px solid rgba(255, 255, 255, 0.1)',
             borderRadius: 6,
             boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
+            position: 'fixed' as React.CSSProperties['position'],
             transition:
               'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           },
           overlay: {
             backgroundColor: 'transparent',
             mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
+            position: 'fixed' as React.CSSProperties['position'],
+            height: '100%',
+            overflow: 'visible',
           },
         }}
       />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx

@@ -7,7 +7,9 @@ export default function WorkflowLayout({ children }: { children: React.ReactNode
   return (
     <main className='flex h-full flex-1 flex-col overflow-hidden'>
       <ErrorBoundary>{children}</ErrorBoundary>
-      <WorkflowTour />
+      <div className='absolute h-0 w-0 overflow-hidden'>
+        <WorkflowTour />
+      </div>
     </main>
   )
 }

apps/sim/components/emcn/components/index.ts

@@ -147,6 +147,8 @@ export { TimePicker, type TimePickerProps, timePickerVariants } from './time-pic
 export { ToastProvider, toast, useToast } from './toast/toast'
 export { Tooltip } from './tooltip/tooltip'
 export {
+  TourCard,
+  type TourCardProps,
   TourTooltip,
   type TourTooltipPlacement,
   type TourTooltipProps,