minor improvements

Author: waleedlatif1

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

@@ -1,2 +1,2 @@
-export { NavTour } from './product-tour'
+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

@@ -37,31 +37,39 @@ export const navTourSteps: Step[] = [
     target: '[data-item-id="knowledge-base"]',
     title: 'Knowledge Base',
     content:
-      'Build knowledge bases from your documents. Agents use these to answer questions with your own data.',
+      '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 workflows running on a schedule. Monitor upcoming and past executions.',
+      '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.',
+      '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.',
+      '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

@@ -16,6 +16,7 @@ const Joyride = dynamic(() => import('react-joyride'), {
 })
 
 const NAV_TOUR_STORAGE_KEY = 'sim-nav-tour-completed-v1'
+export const START_NAV_TOUR_EVENT = 'start-nav-tour'
 
 /** Shared state passed from the tour component to the tooltip adapter via context */
 interface TourState {
@@ -134,7 +135,8 @@ export function NavTour() {
     steps: navTourSteps,
     storageKey: NAV_TOUR_STORAGE_KEY,
     autoStartDelay: 1200,
-    resettable: false,
+    resettable: true,
+    triggerEvent: START_NAV_TOUR_EVENT,
     tourName: 'Navigation tour',
     disabled: isWorkflowPage,
   })
@@ -194,6 +196,7 @@ export function NavTour() {
             position: 'fixed' as React.CSSProperties['position'],
             height: '100%',
             overflow: 'visible',
+            pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
           },
         }}
       />

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

@@ -191,6 +191,7 @@ export function WorkflowTour() {
             position: 'fixed' as React.CSSProperties['position'],
             height: '100%',
             overflow: 'visible',
+            pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
           },
         }}
       />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx

@@ -80,7 +80,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
   }
 
   if (!showWorkflowControls) {
-    return null
+    return <div data-tour='workflow-controls' className='hidden' />
   }
 
   return (

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -36,7 +36,10 @@ import {
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
-import { START_WORKFLOW_TOUR_EVENT } from '@/app/workspace/[workspaceId]/components/product-tour'
+import {
+  START_NAV_TOUR_EVENT,
+  START_WORKFLOW_TOUR_EVENT,
+} from '@/app/workspace/[workspaceId]/components/product-tour'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
@@ -614,7 +617,9 @@ export const Sidebar = memo(function Sidebar() {
   )
 
   const handleStartTour = useCallback(() => {
-    window.dispatchEvent(new CustomEvent(START_WORKFLOW_TOUR_EVENT))
+    window.dispatchEvent(
+      new CustomEvent(isOnWorkflowPage ? START_WORKFLOW_TOUR_EVENT : START_NAV_TOUR_EVENT)
+    )
   }, [])
 
   const { data: fetchedTasks = [], isLoading: tasksLoading } = useTasks(workspaceId)
@@ -1133,7 +1138,7 @@ export const Sidebar = memo(function Sidebar() {
                 )}
               >
                 {/* Tasks */}
-                <div className='flex flex-shrink-0 flex-col'>
+                <div className='tasks-section flex flex-shrink-0 flex-col'>
                   <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
                     <div className='font-base text-[var(--text-icon)] text-small'>All tasks</div>
                     {!isCollapsed && (

apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx

@@ -147,7 +147,7 @@ function TourTooltip({
   const isCentered = placement === 'center'
 
   const cardClasses = cn(
-    'w-[300px] overflow-hidden rounded-[8px] bg-[var(--bg)]',
+    'w-[260px] overflow-hidden rounded-[8px] bg-[var(--bg)]',
     isEntrance && 'animate-tour-tooltip-in motion-reduce:animate-none',
     className
   )