From 94b5e5d63e570f0a576d38db149c974eba97ffaa Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 16:40:47 +0530 Subject: [PATCH 01/22] added basic progress bar --- .../workflow/components/TopBar.tsx | 41 ++++++++++--- apps/rowboat/components/ui/progress-bar.tsx | 60 +++++++++++++++++++ 2 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 apps/rowboat/components/ui/progress-bar.tsx diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 7684bfec8..33afca5dc 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -4,6 +4,7 @@ import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Spinner, import { Button as CustomButton } from "@/components/ui/button"; import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon, Clock, Plug } from "lucide-react"; import { useParams, useRouter } from "next/navigation"; +import { ProgressBar, ProgressStep } from "@/components/ui/progress-bar"; interface TopBarProps { localProjectName: string; @@ -49,6 +50,15 @@ export function TopBar({ const router = useRouter(); const params = useParams(); const projectId = typeof (params as any).projectId === 'string' ? (params as any).projectId : (params as any).projectId?.[0]; + + // Progress bar steps with completion logic and detailed tooltips + const progressSteps: ProgressStep[] = [ + { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: false }, + { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: false }, + { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: false }, + { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: false }, + ]; + return (
@@ -92,16 +102,29 @@ export function TopBar({ ) : null}
- {showCopySuccess &&
-
Copied to clipboard
-
} - {showBuildModeBanner &&
- -
- Switched to draft mode. You can now make changes to your workflow. -
-
} + + {/* Progress Bar - Center */} +
+ +
+ + {/* Right side buttons */}
+ {showCopySuccess &&
+
Copied to clipboard
+
} + + {showBuildModeBanner &&
+ +
+ Switched to draft mode. You can now make changes to your workflow. +
+
} + + {isLive &&
+ + This version is locked.
Changes will not be saved. +
} {!isLive && <> + {/* Progress Label */} + + Progress: + + + {/* Steps */} +
+ {steps.map((step, index) => { + const isLast = index === steps.length - 1; + + return ( +
+ {/* Step Circle with Tooltip */} +
+ {step.id} +
+ + {/* Connecting Line */} + {!isLast && ( +
+ )} +
+ ); + })} +
+
+ ); +} \ No newline at end of file From f128271ade53030a285efe9ac0f9a19365a9ab02 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 16:54:50 +0530 Subject: [PATCH 02/22] step 1 turns green when any agent instructio is changed --- .../workflow/components/TopBar.tsx | 42 +++++++-- .../[projectId]/workflow/workflow_editor.tsx | 89 ++++++++++++++++++- 2 files changed, 122 insertions(+), 9 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 33afca5dc..571aabb39 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Spinner, Tooltip, Input } from "@heroui/react"; import { Button as CustomButton } from "@/components/ui/button"; -import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon, Clock, Plug } from "lucide-react"; +import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon, Clock, Plug, MessageCircleIcon } from "lucide-react"; import { useParams, useRouter } from "next/navigation"; import { ProgressBar, ProgressStep } from "@/components/ui/progress-bar"; @@ -18,6 +18,10 @@ interface TopBarProps { canUndo: boolean; canRedo: boolean; activePanel: 'playground' | 'copilot'; + hasAgentInstructionChanges: boolean; + hasPlaygroundTested: boolean; + hasPublished: boolean; + hasClickedUse: boolean; onUndo: () => void; onRedo: () => void; onDownloadJSON: () => void; @@ -25,6 +29,8 @@ interface TopBarProps { onChangeMode: (mode: 'draft' | 'live') => void; onRevertToLive: () => void; onTogglePanel: () => void; + onUseAssistantClick: () => void; + onStartNewChatAndFocus: () => void; } export function TopBar({ @@ -39,6 +45,10 @@ export function TopBar({ canUndo, canRedo, activePanel, + hasAgentInstructionChanges, + hasPlaygroundTested, + hasPublished, + hasClickedUse, onUndo, onRedo, onDownloadJSON, @@ -46,6 +56,8 @@ export function TopBar({ onChangeMode, onRevertToLive, onTogglePanel, + onUseAssistantClick, + onStartNewChatAndFocus, }: TopBarProps) { const router = useRouter(); const params = useParams(); @@ -53,10 +65,10 @@ export function TopBar({ // Progress bar steps with completion logic and detailed tooltips const progressSteps: ProgressStep[] = [ - { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: false }, - { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: false }, - { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: false }, - { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: false }, + { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: hasAgentInstructionChanges }, + { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: hasPlaygroundTested && hasAgentInstructionChanges }, + { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: hasPublished }, + { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: hasClickedUse }, ]; return ( @@ -168,17 +180,33 @@ export function TopBar({ + } + onPress={() => { + onUseAssistantClick(); + onStartNewChatAndFocus(); + }} + > + Chat with Assistant + } - onPress={() => { if (projectId) { router.push(`/projects/${projectId}/config`); } }} + onPress={() => { + onUseAssistantClick(); + if (projectId) { router.push(`/projects/${projectId}/config`); } + }} > API & SDK Settings } - onPress={() => { if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } }} + onPress={() => { + onUseAssistantClick(); + if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } + }} > Manage Triggers diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index ff2c380d4..9adb3218e 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -61,7 +61,7 @@ interface StateItem { chatKey: number; lastUpdatedAt: string; isLive: boolean; - + agentInstructionsChanged: boolean; } interface State { @@ -656,6 +656,10 @@ function reducer(state: State, action: Action): State { break; } case "update_agent": { + // Check if instructions are being changed + if (action.agent.instructions !== undefined) { + draft.agentInstructionsChanged = true; + } // update agent data draft.workflow.agents = draft.workflow.agents.map((agent) => @@ -930,7 +934,7 @@ export function WorkflowEditor({ chatKey: 0, lastUpdatedAt: workflow.lastUpdatedAt, isLive, - + agentInstructionsChanged: false, } }); @@ -994,6 +998,68 @@ export function WorkflowEditor({ const [projectNameError, setProjectNameError] = useState(null); const [isEditingProjectName, setIsEditingProjectName] = useState(false); const [pendingProjectName, setPendingProjectName] = useState(null); + + // Build progress tracking - persists once set to true + const [hasAgentInstructionChanges, setHasAgentInstructionChanges] = useState(() => { + return localStorage.getItem(`agent_instructions_changed_${projectId}`) === 'true'; + }); + + // Test progress tracking - persists once set to true + const [hasPlaygroundTested, setHasPlaygroundTested] = useState(() => { + return localStorage.getItem(`playground_tested_${projectId}`) === 'true'; + }); + + // Publish progress tracking - persists once set to true + const [hasPublished, setHasPublished] = useState(() => { + return localStorage.getItem(`has_published_${projectId}`) === 'true'; + }); + + // Use progress tracking - persists once set to true + const [hasClickedUse, setHasClickedUse] = useState(() => { + return localStorage.getItem(`has_clicked_use_${projectId}`) === 'true'; + }); + + // Function to mark agent instructions as changed (persists in localStorage) + const markAgentInstructionsChanged = useCallback(() => { + if (!hasAgentInstructionChanges) { + setHasAgentInstructionChanges(true); + localStorage.setItem(`agent_instructions_changed_${projectId}`, 'true'); + } + }, [hasAgentInstructionChanges, projectId]); + + // Function to mark playground as tested (persists in localStorage) + const markPlaygroundTested = useCallback(() => { + if (!hasPlaygroundTested && hasAgentInstructionChanges) { // Only mark if step 1 is complete + setHasPlaygroundTested(true); + localStorage.setItem(`playground_tested_${projectId}`, 'true'); + } + }, [hasPlaygroundTested, hasAgentInstructionChanges, projectId]); + + // Function to mark as published (persists in localStorage) + const markAsPublished = useCallback(() => { + if (!hasPublished) { + setHasPublished(true); + localStorage.setItem(`has_published_${projectId}`, 'true'); + } + }, [hasPublished, projectId]); + + // Function to mark Use Assistant button as clicked (persists in localStorage) + const markUseAssistantClicked = useCallback(() => { + if (!hasClickedUse) { + setHasClickedUse(true); + localStorage.setItem(`has_clicked_use_${projectId}`, 'true'); + } + }, [hasClickedUse, projectId]); + + // Reference to start new chat function from playground + const startNewChatRef = useRef<(() => void) | null>(null); + + // Function to start new chat and focus + const handleStartNewChatAndFocus = useCallback(() => { + if (startNewChatRef.current) { + startNewChatRef.current(); + } + }, []); // Load agent order from localStorage on mount // useEffect(() => { @@ -1061,6 +1127,13 @@ export function WorkflowEditor({ } }, [state.present.workflow, state.present.pendingChanges]); + // Track agent instruction changes from copilot + useEffect(() => { + if (state.present.agentInstructionsChanged) { + markAgentInstructionsChanged(); + } + }, [state.present.agentInstructionsChanged, markAgentInstructionsChanged]); + function handleSelectAgent(name: string) { dispatch({ type: "select_agent", name }); } @@ -1158,6 +1231,10 @@ export function WorkflowEditor({ } function handleUpdateAgent(name: string, agent: Partial>) { + // Check if instructions are being changed + if (agent.instructions !== undefined) { + markAgentInstructionsChanged(); + } dispatch({ type: "update_agent", name, agent }); } @@ -1236,6 +1313,7 @@ export function WorkflowEditor({ dispatch({ type: 'set_publishing', publishing: true }); try { await publishWorkflow(projectId, state.present.workflow); + markAsPublished(); // Mark step 3 as completed when user publishes // Use centralized mode transition for publish handleModeTransition('live', 'publish'); // reflect live mode both internally and externally in one go @@ -1544,6 +1622,10 @@ export function WorkflowEditor({ canUndo={state.currentIndex > 0} canRedo={state.currentIndex < state.patches.length} activePanel={activePanel} + hasAgentInstructionChanges={hasAgentInstructionChanges} + hasPlaygroundTested={hasPlaygroundTested} + hasPublished={hasPublished} + hasClickedUse={hasClickedUse} onUndo={() => dispatchGuarded({ type: "undo" })} onRedo={() => dispatchGuarded({ type: "redo" })} onDownloadJSON={handleDownloadJSON} @@ -1551,6 +1633,8 @@ export function WorkflowEditor({ onChangeMode={onChangeMode} onRevertToLive={handleRevertToLive} onTogglePanel={handleTogglePanel} + onUseAssistantClick={markUseAssistantClicked} + onStartNewChatAndFocus={handleStartNewChatAndFocus} /> {/* Content Area */} @@ -1726,6 +1810,7 @@ export function WorkflowEditor({ isLiveWorkflow={isLive} activePanel={activePanel} onTogglePanel={handleTogglePanel} + onMessageSent={markPlaygroundTested} />
From 8bacb659eea76e0e3dc92ca6f346ae5f688ea724 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 16:59:31 +0530 Subject: [PATCH 03/22] step 2 is done after playground chat --- apps/rowboat/app/projects/[projectId]/playground/app.tsx | 3 +++ .../projects/[projectId]/playground/components/chat.tsx | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx index f02ee8e8c..29e230c24 100644 --- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx +++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx @@ -19,6 +19,7 @@ export function App({ isLiveWorkflow, activePanel, onTogglePanel, + onMessageSent, }: { hidden?: boolean; projectId: string; @@ -29,6 +30,7 @@ export function App({ isLiveWorkflow: boolean; activePanel: 'playground' | 'copilot'; onTogglePanel: () => void; + onMessageSent?: () => void; }) { const [counter, setCounter] = useState(0); const [showDebugMessages, setShowDebugMessages] = useState(true); @@ -142,6 +144,7 @@ export function App({ showDebugMessages={showDebugMessages} triggerCopilotChat={triggerCopilotChat} isLiveWorkflow={isLiveWorkflow} + onMessageSent={onMessageSent} />
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx index c7edde700..8bd4cbf5f 100644 --- a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx +++ b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx @@ -22,6 +22,7 @@ export function Chat({ showJsonMode = false, triggerCopilotChat, isLiveWorkflow, + onMessageSent, }: { projectId: string; workflow: z.infer; @@ -31,6 +32,7 @@ export function Chat({ showJsonMode?: boolean; triggerCopilotChat?: (message: string) => void; isLiveWorkflow: boolean; + onMessageSent?: () => void; }) { const conversationId = useRef(null); const [messages, setMessages] = useState[]>([]); @@ -158,6 +160,11 @@ export function Chat({ setMessages(updatedMessages); setError(null); setIsLastInteracted(true); + + // Mark playground as tested when user sends a message + if (onMessageSent) { + onMessageSent(); + } } // clean up event source on component unmount From 36cb24f3bd3430c58d0cf99208e6bb2b2e11f463 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 17:03:44 +0530 Subject: [PATCH 04/22] step 3 turns green on publish --- .../projects/[projectId]/workflow/components/TopBar.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 571aabb39..036b7a950 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -63,12 +63,21 @@ export function TopBar({ const params = useParams(); const projectId = typeof (params as any).projectId === 'string' ? (params as any).projectId : (params as any).projectId?.[0]; +<<<<<<< HEAD // Progress bar steps with completion logic and detailed tooltips const progressSteps: ProgressStep[] = [ { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: hasAgentInstructionChanges }, { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: hasPlaygroundTested && hasAgentInstructionChanges }, { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: hasPublished }, { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: hasClickedUse }, +======= + // Progress bar steps - step 1: build, step 2: test, step 3: publish + const progressSteps: ProgressStep[] = [ + { id: 1, label: "Build", completed: hasAgentInstructionChanges }, // Complete when agent instructions modified + { id: 2, label: "Test", completed: hasPlaygroundTested && hasAgentInstructionChanges }, // Complete when playground tested AND step 1 complete + { id: 3, label: "Publish", completed: hasPublished }, // Complete when user publishes workflow + { id: 4, label: "Use", completed: false }, +>>>>>>> 7dfbb324 (step 3 turns green on publish) ]; return ( From bcd5c174c8c5cd8020d6639c4598a644270553a4 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 17:23:53 +0530 Subject: [PATCH 05/22] step 4 turns green on use assistant --- .../workflow/components/TopBar.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 036b7a950..7f8e5e618 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -63,6 +63,7 @@ export function TopBar({ const params = useParams(); const projectId = typeof (params as any).projectId === 'string' ? (params as any).projectId : (params as any).projectId?.[0]; +<<<<<<< HEAD <<<<<<< HEAD // Progress bar steps with completion logic and detailed tooltips const progressSteps: ProgressStep[] = [ @@ -72,12 +73,19 @@ export function TopBar({ { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: hasClickedUse }, ======= // Progress bar steps - step 1: build, step 2: test, step 3: publish +======= + // Progress bar steps - step 1: build, step 2: test, step 3: publish, step 4: use +>>>>>>> e2ef4267 (step 4 turns green on use assistant) const progressSteps: ProgressStep[] = [ { id: 1, label: "Build", completed: hasAgentInstructionChanges }, // Complete when agent instructions modified { id: 2, label: "Test", completed: hasPlaygroundTested && hasAgentInstructionChanges }, // Complete when playground tested AND step 1 complete { id: 3, label: "Publish", completed: hasPublished }, // Complete when user publishes workflow +<<<<<<< HEAD { id: 4, label: "Use", completed: false }, >>>>>>> 7dfbb324 (step 3 turns green on publish) +======= + { id: 4, label: "Use", completed: hasClickedUse }, // Complete when user clicks "Use Assistant" +>>>>>>> e2ef4267 (step 4 turns green on use assistant) ]; return ( @@ -175,6 +183,7 @@ export function TopBar({ {/* Deploy CTA - always visible */}
{isLive ? ( +<<<<<<< HEAD <> @@ -183,6 +192,49 @@ export function TopBar({ size="md" className="gap-2 px-4 bg-blue-50 hover:bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 dark:text-blue-400 font-semibold text-sm border border-blue-200 dark:border-blue-700 shadow-sm" startContent={} +======= + + + + + + } + onPress={() => { + onUseAssistantClick(); // Mark step 4 as complete + // Chat is already in foreground in live mode, just mark as used + }} + > + Chat with Assistant + + } + onPress={() => { + onUseAssistantClick(); // Mark step 4 as complete + if (projectId) { router.push(`/projects/${projectId}/config`); } + }} + > + API & SDK Settings + + } + onPress={() => { + onUseAssistantClick(); // Mark step 4 as complete + if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } + }} +>>>>>>> e2ef4267 (step 4 turns green on use assistant) > Use Assistant From 39a3f841f387e452db1aa7818d1383b5573bc724 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 17:36:07 +0530 Subject: [PATCH 06/22] step 1 turns green on copilot changes too --- .../app/projects/[projectId]/workflow/workflow_editor.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index 9adb3218e..a8af2566c 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -661,6 +661,11 @@ function reducer(state: State, action: Action): State { draft.agentInstructionsChanged = true; } + // Check if instructions are being changed + if (action.agent.instructions !== undefined) { + draft.agentInstructionsChanged = true; + } + // update agent data draft.workflow.agents = draft.workflow.agents.map((agent) => agent.name === action.name ? { ...agent, ...action.agent } : agent From a0df17050f7c03f6edb52d11d067c7ba66c42097 Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 17:51:02 +0530 Subject: [PATCH 07/22] reduced font size of the live workflow warning --- .../app/projects/[projectId]/workflow/workflow_editor.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index a8af2566c..9adb3218e 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -661,11 +661,6 @@ function reducer(state: State, action: Action): State { draft.agentInstructionsChanged = true; } - // Check if instructions are being changed - if (action.agent.instructions !== undefined) { - draft.agentInstructionsChanged = true; - } - // update agent data draft.workflow.agents = draft.workflow.agents.map((agent) => agent.name === action.name ? { ...agent, ...action.agent } : agent From 44ea0fa55dba4185dd94f7d04212818ffb2a113c Mon Sep 17 00:00:00 2001 From: arkml Date: Wed, 3 Sep 2025 17:57:37 +0530 Subject: [PATCH 08/22] better hover texts for steps --- .../[projectId]/workflow/components/TopBar.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 7f8e5e618..d07712966 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -71,21 +71,6 @@ export function TopBar({ { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: hasPlaygroundTested && hasAgentInstructionChanges }, { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: hasPublished }, { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: hasClickedUse }, -======= - // Progress bar steps - step 1: build, step 2: test, step 3: publish -======= - // Progress bar steps - step 1: build, step 2: test, step 3: publish, step 4: use ->>>>>>> e2ef4267 (step 4 turns green on use assistant) - const progressSteps: ProgressStep[] = [ - { id: 1, label: "Build", completed: hasAgentInstructionChanges }, // Complete when agent instructions modified - { id: 2, label: "Test", completed: hasPlaygroundTested && hasAgentInstructionChanges }, // Complete when playground tested AND step 1 complete - { id: 3, label: "Publish", completed: hasPublished }, // Complete when user publishes workflow -<<<<<<< HEAD - { id: 4, label: "Use", completed: false }, ->>>>>>> 7dfbb324 (step 3 turns green on publish) -======= - { id: 4, label: "Use", completed: hasClickedUse }, // Complete when user clicks "Use Assistant" ->>>>>>> e2ef4267 (step 4 turns green on use assistant) ]; return ( From 1b95f20a7bc0d9fc2fbf499bb342e33989faec8e Mon Sep 17 00:00:00 2001 From: arkml Date: Thu, 4 Sep 2025 17:23:42 +0530 Subject: [PATCH 09/22] change progress bar style --- .../workflow/components/TopBar.tsx | 72 ++++--------------- apps/rowboat/components/ui/progress-bar.tsx | 8 ++- 2 files changed, 21 insertions(+), 59 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index d07712966..26ed72185 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -62,15 +62,20 @@ export function TopBar({ const router = useRouter(); const params = useParams(); const projectId = typeof (params as any).projectId === 'string' ? (params as any).projectId : (params as any).projectId?.[0]; + // Progress bar steps with completion logic and current step detection + const step1Complete = hasAgentInstructionChanges; + const step2Complete = hasPlaygroundTested && hasAgentInstructionChanges; + const step3Complete = hasPublished && hasPlaygroundTested && hasAgentInstructionChanges; + const step4Complete = hasClickedUse && hasPublished && hasPlaygroundTested && hasAgentInstructionChanges; + + // Determine current step (first incomplete step) + const currentStep = !step1Complete ? 1 : !step2Complete ? 2 : !step3Complete ? 3 : !step4Complete ? 4 : null; -<<<<<<< HEAD -<<<<<<< HEAD - // Progress bar steps with completion logic and detailed tooltips const progressSteps: ProgressStep[] = [ - { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: hasAgentInstructionChanges }, - { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: hasPlaygroundTested && hasAgentInstructionChanges }, - { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: hasPublished }, - { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: hasClickedUse }, + { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: step1Complete, isCurrent: currentStep === 1 }, + { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: step2Complete, isCurrent: currentStep === 2 }, + { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: step3Complete, isCurrent: currentStep === 3 }, + { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: step4Complete, isCurrent: currentStep === 4 }, ]; return ( @@ -135,10 +140,6 @@ export function TopBar({
} - {isLive &&
- - This version is locked.
Changes will not be saved. -
} {!isLive && <> {isLive ? ( -<<<<<<< HEAD <> - - - } - onPress={() => { - onUseAssistantClick(); // Mark step 4 as complete - // Chat is already in foreground in live mode, just mark as used - }} - > - Chat with Assistant - - } - onPress={() => { - onUseAssistantClick(); // Mark step 4 as complete - if (projectId) { router.push(`/projects/${projectId}/config`); } - }} - > - API & SDK Settings - - } - onPress={() => { - onUseAssistantClick(); // Mark step 4 as complete - if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } - }} ->>>>>>> e2ef4267 (step 4 turns green on use assistant) + onPress={onUseAssistantClick} > Use Assistant @@ -253,7 +211,7 @@ export function TopBar({ onUseAssistantClick(); if (projectId) { router.push(`/projects/${projectId}/manage-triggers`); } }} - > + > Manage Triggers diff --git a/apps/rowboat/components/ui/progress-bar.tsx b/apps/rowboat/components/ui/progress-bar.tsx index a01e4c3b4..7b0bca55c 100644 --- a/apps/rowboat/components/ui/progress-bar.tsx +++ b/apps/rowboat/components/ui/progress-bar.tsx @@ -5,6 +5,8 @@ export interface ProgressStep { id: number; label: string; completed: boolean; + icon?: string; // The icon/symbol to show instead of number + isCurrent?: boolean; // Whether this is the current step } interface ProgressBarProps { @@ -33,11 +35,13 @@ export function ProgressBar({ steps, className }: ProgressBarProps) { "w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-semibold transition-all duration-300 cursor-default", step.completed ? "bg-green-500 border-green-500 text-white" - : "bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-700 text-red-600 dark:text-red-400" + : step.isCurrent + ? "bg-yellow-500 border-yellow-500 text-white" + : "bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400" )} title={step.label} > - {step.id} + {step.completed ? "✓" : step.isCurrent ? "⚡" : "○"} {/* Connecting Line */} From 4b32ab0ef3d1c6a9f360997d83b0831b0846f688 Mon Sep 17 00:00:00 2001 From: arkml Date: Thu, 4 Sep 2025 18:03:31 +0530 Subject: [PATCH 10/22] better tool tips --- .../projects/[projectId]/workflow/components/TopBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 26ed72185..2de28d05d 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -72,10 +72,10 @@ export function TopBar({ const currentStep = !step1Complete ? 1 : !step2Complete ? 2 : !step3Complete ? 3 : !step4Complete ? 4 : null; const progressSteps: ProgressStep[] = [ - { id: 1, label: "Build: Ask the copilot to build the assistant you want and apply the changes", completed: step1Complete, isCurrent: currentStep === 1 }, - { id: 2, label: "Test: Chat with the assistant in the playground. You can ask the copilot to make changes or use the handy 'Fix' and 'Explain' buttons in the chat", completed: step2Complete, isCurrent: currentStep === 2 }, - { id: 3, label: "Publish: Make the assistant live by clicking the Publish button on the right", completed: step3Complete, isCurrent: currentStep === 3 }, - { id: 4, label: "Use: Use the assistant by chatting with it, adding triggers like incoming emails, or integrating through the API", completed: step4Complete, isCurrent: currentStep === 4 }, + { id: 1, label: "Build: Ask the copilot to create your assistant. Add tools and connect data sources.", completed: step1Complete, isCurrent: currentStep === 1 }, + { id: 2, label: "Test: Test out your assistant by chatting with it. Use 'Fix' and 'Explain' to improve it.", completed: step2Complete, isCurrent: currentStep === 2 }, + { id: 3, label: "Publish: Make it live with the Publish button. You can always switch back to draft.", completed: step3Complete, isCurrent: currentStep === 3 }, + { id: 4, label: "Use: Click the 'Use Assistant' button to chat, set triggers (like emails), or connect via API.", completed: step4Complete, isCurrent: currentStep === 4 }, ]; return ( From 6ef0fc0cf217acdec72e479e2f4a20dc11fd8e69 Mon Sep 17 00:00:00 2001 From: arkml Date: Fri, 5 Sep 2025 20:46:24 +0530 Subject: [PATCH 11/22] reverted styling of use assistant button --- .../app/projects/[projectId]/workflow/components/TopBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 2de28d05d..9960c4320 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -175,7 +175,7 @@ export function TopBar({
- {TOUR_STEPS[currentStep].title} + {steps[currentStep].title}
From a0532f02c2c18ea15b74ae56b00d09264cadc2fc Mon Sep 17 00:00:00 2001 From: arkml Date: Fri, 5 Sep 2025 23:01:49 +0530 Subject: [PATCH 17/22] added tour for test --- .../workflow/components/TopBar.tsx | 3 ++ .../[projectId]/workflow/workflow_editor.tsx | 20 +++++++++++++ .../components/common/product-tour.tsx | 30 +++++++++++++++---- 3 files changed, 48 insertions(+), 5 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index d01bafb3a..52df28775 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -32,6 +32,7 @@ interface TopBarProps { onUseAssistantClick: () => void; onStartNewChatAndFocus: () => void; onStartBuildTour?: () => void; + onStartTestTour?: () => void; } export function TopBar({ @@ -60,6 +61,7 @@ export function TopBar({ onUseAssistantClick, onStartNewChatAndFocus, onStartBuildTour, + onStartTestTour, }: TopBarProps) { const router = useRouter(); const params = useParams(); @@ -130,6 +132,7 @@ export function TopBar({ steps={progressSteps} onStepClick={(step) => { if (step.id === 1 && onStartBuildTour) onStartBuildTour(); + if (step.id === 2 && onStartTestTour) onStartTestTour(); }} />
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index 0744718f5..b55a0e83c 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -955,6 +955,7 @@ export function WorkflowEditor({ const [lastWorkflowId, setLastWorkflowId] = useState(null); const [showTour, setShowTour] = useState(true); const [showBuildTour, setShowBuildTour] = useState(false); + const [showTestTour, setShowTestTour] = useState(false); // Centralized mode transition handler const handleModeTransition = useCallback((newMode: 'draft' | 'live', reason: 'publish' | 'view_live' | 'switch_draft' | 'modal_switch') => { @@ -1645,6 +1646,7 @@ export function WorkflowEditor({ onUseAssistantClick={markUseAssistantClicked} onStartNewChatAndFocus={handleStartNewChatAndFocus} onStartBuildTour={() => setShowBuildTour(true)} + onStartTestTour={() => setShowTestTour(true)} /> {/* Content Area */} @@ -1868,9 +1870,27 @@ export function WorkflowEditor({ { target: 'entity-data', title: 'Step 4/5', content: 'Data Sources: add files, URLs, or S3 and connect them in your agent instructions.' }, { target: 'entity-prompts', title: 'Step 5/5', content: 'Variables: define reusable prompts/variables used across your workflow.' }, ]} + onStepChange={(_, step) => { + if (step.target === 'copilot') setActivePanel('copilot'); + }} onComplete={() => setShowBuildTour(false)} /> )} + {showTestTour && ( + { + if (index === 0) setActivePanel('playground'); + if (index === 1) setActivePanel('copilot'); + }} + onComplete={() => setShowTestTour(false)} + /> + )} {/* Revert to Live Confirmation Modal */} diff --git a/apps/rowboat/components/common/product-tour.tsx b/apps/rowboat/components/common/product-tour.tsx index 9c6134de2..f123853c6 100644 --- a/apps/rowboat/components/common/product-tour.tsx +++ b/apps/rowboat/components/common/product-tour.tsx @@ -139,11 +139,13 @@ export function ProductTour({ onComplete, stepsOverride, forceStart = false, + onStepChange, }: { projectId: string; onComplete: () => void; stepsOverride?: TourStep[]; forceStart?: boolean; + onStepChange?: (index: number, step: TourStep) => void; }) { const steps = stepsOverride && stepsOverride.length > 0 ? stepsOverride : TOUR_STEPS; const [currentStep, setCurrentStep] = useState(0); @@ -160,7 +162,7 @@ export function ProductTour({ }, [forceStart]); const currentTarget = steps[currentStep].target; - const targetElement = document.querySelector(`[data-tour-target="${currentTarget}"]`); + const [targetElement, setTargetElement] = useState(null); // Determine if the target is a panel that should have the hint on the side const isPanelTarget = ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'entity-data'].includes(currentTarget); @@ -183,12 +185,30 @@ export function ProductTour({ whileElementsMounted: autoUpdate }); - // Update reference element when step changes + // Update reference element when step changes and notify parent first, then resolve target element useEffect(() => { - if (targetElement) { - refs.setReference(targetElement); + let raf1: number | undefined; + let raf2: number | undefined; + + if (onStepChange) { + onStepChange(currentStep, steps[currentStep]); } - }, [currentStep, targetElement, refs]); + + // Give the parent a frame to update DOM (e.g., switching panels), then query element + raf1 = requestAnimationFrame(() => { + raf2 = requestAnimationFrame(() => { + const el = document.querySelector(`[data-tour-target="${currentTarget}"]`); + setTargetElement(el); + if (el) refs.setReference(el as any); + }); + }); + + return () => { + if (raf1) cancelAnimationFrame(raf1); + if (raf2) cancelAnimationFrame(raf2); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentStep, currentTarget]); const handleNext = useCallback(() => { if (currentStep < steps.length - 1) { From fe3ecd534359ed80b9a20a848afb00c0c3e8403f Mon Sep 17 00:00:00 2001 From: arkml Date: Fri, 5 Sep 2025 23:05:17 +0530 Subject: [PATCH 18/22] added tour for publish --- .../[projectId]/workflow/components/TopBar.tsx | 3 +++ .../[projectId]/workflow/workflow_editor.tsx | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 52df28775..0ff0fe3b2 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -33,6 +33,7 @@ interface TopBarProps { onStartNewChatAndFocus: () => void; onStartBuildTour?: () => void; onStartTestTour?: () => void; + onStartPublishTour?: () => void; } export function TopBar({ @@ -62,6 +63,7 @@ export function TopBar({ onStartNewChatAndFocus, onStartBuildTour, onStartTestTour, + onStartPublishTour, }: TopBarProps) { const router = useRouter(); const params = useParams(); @@ -133,6 +135,7 @@ export function TopBar({ onStepClick={(step) => { if (step.id === 1 && onStartBuildTour) onStartBuildTour(); if (step.id === 2 && onStartTestTour) onStartTestTour(); + if (step.id === 3 && onStartPublishTour) onStartPublishTour(); }} /> diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index b55a0e83c..3816a5696 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -956,6 +956,7 @@ export function WorkflowEditor({ const [showTour, setShowTour] = useState(true); const [showBuildTour, setShowBuildTour] = useState(false); const [showTestTour, setShowTestTour] = useState(false); + const [showPublishTour, setShowPublishTour] = useState(false); // Centralized mode transition handler const handleModeTransition = useCallback((newMode: 'draft' | 'live', reason: 'publish' | 'view_live' | 'switch_draft' | 'modal_switch') => { @@ -1647,6 +1648,12 @@ export function WorkflowEditor({ onStartNewChatAndFocus={handleStartNewChatAndFocus} onStartBuildTour={() => setShowBuildTour(true)} onStartTestTour={() => setShowTestTour(true)} + onStartPublishTour={() => { + if (isLive) { + handleModeTransition('draft', 'switch_draft'); + } + setShowPublishTour(true); + }} /> {/* Content Area */} @@ -1891,6 +1898,16 @@ export function WorkflowEditor({ onComplete={() => setShowTestTour(false)} /> )} + {showPublishTour && ( + setShowPublishTour(false)} + /> + )} {/* Revert to Live Confirmation Modal */} From 97f9116ccafe2be9b2508a865afdbea18c8c899d Mon Sep 17 00:00:00 2001 From: arkml Date: Fri, 5 Sep 2025 23:25:10 +0530 Subject: [PATCH 19/22] added tour for use step --- .../workflow/components/TopBar.tsx | 3 +++ .../[projectId]/workflow/workflow_editor.tsx | 17 ++++++++++++++ .../projects/layout/components/sidebar.tsx | 22 ++++++++++++++++--- .../components/common/product-tour.tsx | 4 ++-- 4 files changed, 41 insertions(+), 5 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx index 0ff0fe3b2..cf398040a 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TopBar.tsx @@ -34,6 +34,7 @@ interface TopBarProps { onStartBuildTour?: () => void; onStartTestTour?: () => void; onStartPublishTour?: () => void; + onStartUseTour?: () => void; } export function TopBar({ @@ -64,6 +65,7 @@ export function TopBar({ onStartBuildTour, onStartTestTour, onStartPublishTour, + onStartUseTour, }: TopBarProps) { const router = useRouter(); const params = useParams(); @@ -136,6 +138,7 @@ export function TopBar({ if (step.id === 1 && onStartBuildTour) onStartBuildTour(); if (step.id === 2 && onStartTestTour) onStartTestTour(); if (step.id === 3 && onStartPublishTour) onStartPublishTour(); + if (step.id === 4 && onStartUseTour) onStartUseTour(); }} /> diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index 3816a5696..eebd16f93 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -957,6 +957,7 @@ export function WorkflowEditor({ const [showBuildTour, setShowBuildTour] = useState(false); const [showTestTour, setShowTestTour] = useState(false); const [showPublishTour, setShowPublishTour] = useState(false); + const [showUseTour, setShowUseTour] = useState(false); // Centralized mode transition handler const handleModeTransition = useCallback((newMode: 'draft' | 'live', reason: 'publish' | 'view_live' | 'switch_draft' | 'modal_switch') => { @@ -1654,6 +1655,7 @@ export function WorkflowEditor({ } setShowPublishTour(true); }} + onStartUseTour={() => setShowUseTour(true)} /> {/* Content Area */} @@ -1898,6 +1900,21 @@ export function WorkflowEditor({ onComplete={() => setShowTestTour(false)} /> )} + {showUseTour && ( + { + if (index === 0) setActivePanel('playground'); + }} + onComplete={() => setShowUseTour(false)} + /> + )} {showPublishTour && ( ); -} \ No newline at end of file +} diff --git a/apps/rowboat/components/common/product-tour.tsx b/apps/rowboat/components/common/product-tour.tsx index f123853c6..a71b72dca 100644 --- a/apps/rowboat/components/common/product-tour.tsx +++ b/apps/rowboat/components/common/product-tour.tsx @@ -59,7 +59,7 @@ const TOUR_STEPS: TourStep[] = [ function TourBackdrop({ targetElement }: { targetElement: Element | null }) { const [rect, setRect] = useState(null); const isPanelTarget = targetElement?.getAttribute('data-tour-target') && - ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground'].includes( + ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'settings', 'triggers'].includes( targetElement.getAttribute('data-tour-target')! ); @@ -165,7 +165,7 @@ export function ProductTour({ const [targetElement, setTargetElement] = useState(null); // Determine if the target is a panel that should have the hint on the side - const isPanelTarget = ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'entity-data'].includes(currentTarget); + const isPanelTarget = ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'entity-data', 'settings', 'triggers'].includes(currentTarget); const { x, y, strategy, refs, context, middlewareData } = useFloating({ placement: isPanelTarget ? 'right' : 'top', From 54f19785baeeb629339933a9e4e39a0245ab418d Mon Sep 17 00:00:00 2001 From: arkml Date: Fri, 5 Sep 2025 23:31:38 +0530 Subject: [PATCH 20/22] added tool tip for each step to click for tour --- apps/rowboat/components/ui/progress-bar.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/rowboat/components/ui/progress-bar.tsx b/apps/rowboat/components/ui/progress-bar.tsx index f0e777b0c..dad9e650e 100644 --- a/apps/rowboat/components/ui/progress-bar.tsx +++ b/apps/rowboat/components/ui/progress-bar.tsx @@ -38,13 +38,27 @@ export function ProgressBar({ steps, className, onStepClick }: ProgressBarProps)
    {steps.map((step, index) => { const isLast = index === steps.length - 1; + const tooltipText = (() => { + switch (step.id) { + case 1: + return 'Build your assistant - click for tour'; + case 2: + return 'Test your assistant - click for tour'; + case 3: + return 'Make assistant live - click for tour'; + case 4: + return 'Interact with your assistant - click for tour'; + default: + return 'Click for tour'; + } + })(); return (
  1. {/* Step Circle with Tooltip */}
    Date: Sat, 6 Sep 2025 18:52:42 +0530 Subject: [PATCH 21/22] refined wording in product tours --- .../[projectId]/workflow/workflow_editor.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index eebd16f93..ba5e95a3d 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -1873,11 +1873,11 @@ export function WorkflowEditor({ projectId={projectId} forceStart stepsOverride={[ - { target: 'copilot', title: 'Step 1/5', content: 'Copilot helps you create and refine agents. Ask it to scaffold your assistant and iterate on instructions.' }, - { target: 'entity-agents', title: 'Step 2/5', content: 'Manage Agents: configure main and helper agents, models, and behavior.' }, - { target: 'entity-tools', title: 'Step 3/5', content: 'Tools: add custom tools, MCP, or Composio integrations. Mock tools for quick testing.' }, - { target: 'entity-data', title: 'Step 4/5', content: 'Data Sources: add files, URLs, or S3 and connect them in your agent instructions.' }, - { target: 'entity-prompts', title: 'Step 5/5', content: 'Variables: define reusable prompts/variables used across your workflow.' }, + { target: 'copilot', title: 'Step 1/5', content: 'Use Copilot to create and refine agents. Describe what you need, then iterate with its suggestions.' }, + { target: 'entity-agents', title: 'Step 2/5', content: 'All your agents appear here. Adjust instructions, switch models, and fine-tune their behavior.' }, + { target: 'entity-tools', title: 'Step 3/5', content: 'Pick from thousands of ready-made tools or connect your own MCP servers.' }, + { target: 'entity-data', title: 'Step 4/5', content: 'Upload files, scrape websites, or add free-text knowledge to guide your agents.' }, + { target: 'entity-prompts', title: 'Step 5/5', content: 'Define reusable context variables automatically shared across all agents.' }, ]} onStepChange={(_, step) => { if (step.target === 'copilot') setActivePanel('copilot'); @@ -1890,8 +1890,8 @@ export function WorkflowEditor({ projectId={projectId} forceStart stepsOverride={[ - { target: 'playground', title: 'Step 1/2', content: 'You can chat with the assistant to test it out. Send messages, observe tool calls, and iterate quickly.' }, - { target: 'copilot', title: 'Step 2/2', content: 'Ask the Copilot to improve your agents based on the test chat. Use Fix and Explain to iterate.' }, + { target: 'playground', title: 'Step 1/2', content: 'Chat with your assistant to test it. Send messages, watch tool calls in action, and debug agent flows.' }, + { target: 'copilot', title: 'Step 2/2', content: 'Ask Copilot to improve your agents based on test results. Use “Fix” and “Explain” to iterate quickly.' }, ]} onStepChange={(index) => { if (index === 0) setActivePanel('playground'); @@ -1905,9 +1905,9 @@ export function WorkflowEditor({ projectId={projectId} forceStart stepsOverride={[ - { target: 'playground', title: 'Step 1/3', content: 'Chat: chat with your assistant to test and use it.' }, - { target: 'triggers', title: 'Step 2/3', content: 'Triggers: set up external (webhook/integration) or time-based runs.' }, - { target: 'settings', title: 'Step 3/3', content: 'Settings: find API keys to connect with the API and SDK.' }, + { target: 'playground', title: 'Step 1/3', content: 'Chat with your assistant.' }, + { target: 'triggers', title: 'Step 2/3', content: 'Triggers: choose from 100+ external events or schedule recurring runs.' }, + { target: 'settings', title: 'Step 3/3', content: 'Grab your API keys in Settings and connect through the API or SDK.' }, ]} onStepChange={(index) => { if (index === 0) setActivePanel('playground'); @@ -1920,7 +1920,7 @@ export function WorkflowEditor({ projectId={projectId} forceStart stepsOverride={[ - { target: 'deploy', title: 'Publish', content: 'Click Publish to make your workflow live. This enables API and SDK access.' }, + { target: 'deploy', title: 'Publish', content: 'Click Publish to make your workflow live, enabling triggers and API/SDK access. You can revert to a draft at any time.' }, ]} onComplete={() => setShowPublishTour(false)} /> From e39152c4fbb4ea1dfef617c0ca39a48ad1ae6fea Mon Sep 17 00:00:00 2001 From: arkml Date: Sat, 6 Sep 2025 19:04:53 +0530 Subject: [PATCH 22/22] added jobs and conversations to the product tour --- .../[projectId]/workflow/workflow_editor.tsx | 8 +++++--- .../app/projects/layout/components/sidebar.tsx | 12 ++++++++++-- apps/rowboat/components/common/product-tour.tsx | 4 ++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx index ba5e95a3d..034ffeea3 100644 --- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx +++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx @@ -1905,9 +1905,11 @@ export function WorkflowEditor({ projectId={projectId} forceStart stepsOverride={[ - { target: 'playground', title: 'Step 1/3', content: 'Chat with your assistant.' }, - { target: 'triggers', title: 'Step 2/3', content: 'Triggers: choose from 100+ external events or schedule recurring runs.' }, - { target: 'settings', title: 'Step 3/3', content: 'Grab your API keys in Settings and connect through the API or SDK.' }, + { target: 'playground', title: 'Step 1/5', content: 'Chat: you can chat with your assistant here.' }, + { target: 'triggers', title: 'Step 2/5', content: 'Triggers: set up external (webhook/integration) or time-based schedules.' }, + { target: 'jobs', title: 'Step 3/5', content: 'Jobs: monitor your trigger runs and scheduled tasks here.' }, + { target: 'settings', title: 'Step 4/5', content: 'Settings: find API keys to connect with the API and SDK.' }, + { target: 'conversations', title: 'Step 5/5', content: 'Conversations: see all past interactions in one place, including manual chats, trigger activity, and API calls.' }, ]} onStepChange={(index) => { if (index === 0) setActivePanel('playground'); diff --git a/apps/rowboat/app/projects/layout/components/sidebar.tsx b/apps/rowboat/app/projects/layout/components/sidebar.tsx index 955190c9a..c79b4630a 100644 --- a/apps/rowboat/app/projects/layout/components/sidebar.tsx +++ b/apps/rowboat/app/projects/layout/components/sidebar.tsx @@ -200,7 +200,11 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl ? 'entity-data-sources' : item.href === 'manage-triggers' ? 'triggers' - : undefined + : item.href === 'jobs' + ? 'jobs' + : item.href === 'conversations' + ? 'conversations' + : undefined } > (null); const isPanelTarget = targetElement?.getAttribute('data-tour-target') && - ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'settings', 'triggers'].includes( + ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'settings', 'triggers', 'jobs', 'conversations'].includes( targetElement.getAttribute('data-tour-target')! ); @@ -165,7 +165,7 @@ export function ProductTour({ const [targetElement, setTargetElement] = useState(null); // Determine if the target is a panel that should have the hint on the side - const isPanelTarget = ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'entity-data', 'settings', 'triggers'].includes(currentTarget); + const isPanelTarget = ['entity-agents', 'entity-tools', 'entity-prompts', 'copilot', 'playground', 'entity-data', 'settings', 'triggers', 'jobs', 'conversations'].includes(currentTarget); const { x, y, strategy, refs, context, middlewareData } = useFloating({ placement: isPanelTarget ? 'right' : 'top',