feat(tour): added product tour

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

@@ -0,0 +1,2 @@
+export { NavTour, START_NAV_TOUR_EVENT } from './product-tour'
+export { START_WORKFLOW_TOUR_EVENT, WorkflowTour } from './workflow-tour'

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

@@ -0,0 +1,76 @@
+import type { Step } from 'react-joyride'
+
+export const navTourSteps: Step[] = [
+  {
+    target: '[data-item-id="home"]',
+    title: 'Home',
+    content:
+      '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"]',
+    title: 'Tables',
+    content:
+      'Store and query structured data. Your workflows can read and write to tables directly.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '[data-item-id="files"]',
+    title: 'Files',
+    content: 'Upload and manage files that your workflows can process, transform, or reference.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '[data-item-id="knowledge-base"]',
+    title: 'Knowledge Base',
+    content:
+      'Build knowledge bases from your documents. Set up connectors to give your agents realtime access to your data sources from sources like Notion, Drive, Slack, Confluence, and more.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '[data-item-id="scheduled-tasks"]',
+    title: 'Scheduled Tasks',
+    content:
+      'View and manage background tasks. Set up new tasks, or view the tasks the Mothership is monitoring for upcoming or past executions.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '[data-item-id="logs"]',
+    title: 'Logs',
+    content:
+      'Monitor every workflow execution. See inputs, outputs, errors, and timing for each run. View analytics on performance and costs, filter previous runs, and view snapshots of the workflow at the time of execution.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '.tasks-section',
+    title: 'Tasks',
+    content:
+      'Tasks that work for you. Mothership can create, edit, and delete resource throughout the platform. It can also perform actions on your behalf, like sending emails, creating tasks, and more.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+  {
+    target: '.workflows-section',
+    title: 'Workflows',
+    content:
+      'All your workflows live here. Create new ones with the + button and organize them into folders. Deploy your workflows as API, webhook, schedule, or chat widget. Then hit Run to test it out.',
+    placement: 'right',
+    disableBeacon: true,
+  },
+]

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

@@ -0,0 +1,63 @@
+'use client'
+
+import { useMemo } from 'react'
+import dynamic from 'next/dynamic'
+import { usePathname } from 'next/navigation'
+import { navTourSteps } from '@/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps'
+import type { TourState } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
+import {
+  getSharedJoyrideProps,
+  TourStateContext,
+  TourTooltipAdapter,
+} from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
+import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
+
+const Joyride = dynamic(() => import('react-joyride'), {
+  ssr: false,
+})
+
+const NAV_TOUR_STORAGE_KEY = 'sim-nav-tour-completed-v1'
+export const START_NAV_TOUR_EVENT = 'start-nav-tour'
+
+export function NavTour() {
+  const pathname = usePathname()
+  const isWorkflowPage = /\/w\/[^/]+/.test(pathname)
+
+  const { run, stepIndex, tourKey, isTooltipVisible, isEntrance, handleCallback } = useTour({
+    steps: navTourSteps,
+    storageKey: NAV_TOUR_STORAGE_KEY,
+    autoStartDelay: 1200,
+    resettable: true,
+    triggerEvent: START_NAV_TOUR_EVENT,
+    tourName: 'Navigation tour',
+    disabled: isWorkflowPage,
+  })
+
+  const tourState = useMemo<TourState>(
+    () => ({
+      isTooltipVisible,
+      isEntrance,
+      totalSteps: navTourSteps.length,
+    }),
+    [isTooltipVisible, isEntrance]
+  )
+
+  return (
+    <TourStateContext.Provider value={tourState}>
+      <Joyride
+        key={tourKey}
+        steps={navTourSteps}
+        run={run}
+        stepIndex={stepIndex}
+        callback={handleCallback}
+        continuous
+        disableScrolling
+        disableScrollParentFix
+        disableOverlayClose
+        spotlightPadding={4}
+        tooltipComponent={TourTooltipAdapter}
+        {...getSharedJoyrideProps({ spotlightBorderRadius: 8 })}
+      />
+    </TourStateContext.Provider>
+  )
+}

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

@@ -0,0 +1,157 @@
+'use client'
+
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import type { TooltipRenderProps } from 'react-joyride'
+import { TourTooltip } from '@/components/emcn'
+
+/** Shared state passed from the tour component to the tooltip adapter via context */
+export interface TourState {
+  isTooltipVisible: boolean
+  isEntrance: boolean
+  totalSteps: number
+}
+
+export const TourStateContext = createContext<TourState>({
+  isTooltipVisible: true,
+  isEntrance: true,
+  totalSteps: 0,
+})
+
+/**
+ * Maps Joyride placement strings to TourTooltip placement values.
+ */
+function mapPlacement(placement?: string): 'top' | 'right' | 'bottom' | 'left' | 'center' {
+  switch (placement) {
+    case 'top':
+    case 'top-start':
+    case 'top-end':
+      return 'top'
+    case 'right':
+    case 'right-start':
+    case 'right-end':
+      return 'right'
+    case 'bottom':
+    case 'bottom-start':
+    case 'bottom-end':
+      return 'bottom'
+    case 'left':
+    case 'left-start':
+    case 'left-end':
+      return 'left'
+    case 'center':
+      return 'center'
+    default:
+      return 'bottom'
+  }
+}
+
+/**
+ * Adapter that bridges Joyride's tooltip render props to the EMCN TourTooltip component.
+ * Reads transition state from TourStateContext to coordinate fade animations.
+ */
+export function TourTooltipAdapter({
+  step,
+  index,
+  isLastStep,
+  tooltipProps,
+  primaryProps,
+  backProps,
+  closeProps,
+}: TooltipRenderProps) {
+  const { isTooltipVisible, isEntrance, totalSteps } = useContext(TourStateContext)
+  const [targetEl, setTargetEl] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const { target } = step
+    if (typeof target === 'string') {
+      setTargetEl(document.querySelector<HTMLElement>(target))
+    } else if (target instanceof HTMLElement) {
+      setTargetEl(target)
+    } else {
+      setTargetEl(null)
+    }
+  }, [step])
+
+  const refCallback = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (tooltipProps.ref) {
+        ;(tooltipProps.ref as React.RefCallback<HTMLDivElement>)(node)
+      }
+    },
+    [tooltipProps.ref]
+  )
+
+  const placement = mapPlacement(step.placement)
+
+  return (
+    <>
+      <div
+        ref={refCallback}
+        role={tooltipProps.role}
+        aria-modal={tooltipProps['aria-modal']}
+        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', width: 0, height: 0 }}
+      />
+      <TourTooltip
+        title={step.title as string}
+        description={step.content}
+        step={index + 1}
+        totalSteps={totalSteps}
+        placement={placement}
+        targetEl={targetEl}
+        isFirst={index === 0}
+        isLast={isLastStep}
+        isVisible={isTooltipVisible}
+        isEntrance={isEntrance && index === 0}
+        onNext={primaryProps.onClick as () => void}
+        onBack={backProps.onClick as () => void}
+        onClose={closeProps.onClick as () => void}
+      />
+    </>
+  )
+}
+
+const SPOTLIGHT_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)'
+
+/**
+ * Returns the shared Joyride floaterProps and styles config used by both tours.
+ * Only `spotlightPadding` and spotlight `borderRadius` differ between tours.
+ */
+export function getSharedJoyrideProps(overrides: { spotlightBorderRadius: number }) {
+  return {
+    floaterProps: {
+      disableAnimation: true,
+      hideArrow: true,
+      styles: {
+        floater: {
+          filter: 'none',
+          opacity: 0,
+          pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+          width: 0,
+          height: 0,
+        },
+      },
+    },
+    styles: {
+      options: {
+        zIndex: 10000,
+      },
+      spotlight: {
+        backgroundColor: 'transparent',
+        border: '1px solid rgba(255, 255, 255, 0.1)',
+        borderRadius: overrides.spotlightBorderRadius,
+        boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
+        position: 'fixed' as React.CSSProperties['position'],
+        transition: SPOTLIGHT_TRANSITION,
+      },
+      overlay: {
+        backgroundColor: 'transparent',
+        mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
+        position: 'fixed' as React.CSSProperties['position'],
+        height: '100%',
+        overflow: 'visible',
+        pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
+      },
+    },
+  } as const
+}