feat(frontend): add interactive tutorial for the new builder interface #11458
Conversation
github-project-automation
bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughAdds a Shepherd.js-driven interactive tutorial to the FlowEditor, including a tutorial Zustand store, many DOM/canvas/menu/save helper modules, new tutorial step definitions/styles, and instrumentation (data-id / data-tutorial-id) plus small control-panel and store flags to coordinate forced-open UI flows. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Tutorial as Tutorial Orchestrator
participant Store as Zustand Stores
participant FlowUI as FlowEditor UI
participant Canvas as Node/Edge Canvas
participant API as Block API
User->>Tutorial: startTutorial()
Tutorial->>Store: setIsTutorialRunning(true)
Tutorial->>API: prefetchTutorialBlocks()
API-->>Tutorial: blocks
Tutorial->>Store: cache prefetched blocks
Tutorial->>FlowUI: inject styles & initialize Shepherd tour
FlowUI-->>User: show Welcome step
User->>FlowUI: open block menu / add block
FlowUI->>Store: node added (useNodeStore)
Store->>Canvas: render node
Tutorial->>FlowUI: highlight elements, forceOpenBlockMenu(true)
User->>FlowUI: configure node inputs
FlowUI->>Store: setTutorialInputValues(...)
Tutorial->>Store: poll node values via helpers
User->>Canvas: connect nodes
Canvas->>Tutorial: edge detected (edgeStore subscription)
Tutorial->>FlowUI: forceOpenSave(true)
User->>FlowUI: save & run
Tutorial->>FlowUI: wait for output element, show run/output step
User->>Tutorial: complete/skip/cancel
Tutorial->>Store: cleanup UI state and persist outcome
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used📓 Path-based instructions (8)autogpt_platform/frontend/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
autogpt_platform/frontend/**/*.{ts,tsx,json}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
autogpt_platform/frontend/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
autogpt_platform/frontend/**📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Files:
autogpt_platform/frontend/**/*.{ts,tsx,css}📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Files:
autogpt_platform/frontend/src/**/*.tsx📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Files:
autogpt_platform/frontend/src/app/**/*.tsx📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Files:
🧬 Code graph analysis (1)autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
🔇 Additional comments (10)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
✅ Deploy Preview for auto-gpt-docs-dev canceled.
|
✅ Deploy Preview for auto-gpt-docs canceled.
|
|
Here's the code health analysis summary for commits Analysis Summary
|
|
Thank you for adding this tutorial functionality to the new builder! This looks like a valuable feature that will help users get familiar with the builder interface. However, before this PR can be approved, there are some issues with the PR description that need to be addressed:
The code changes themselves look well-structured and comprehensive. I particularly like how you've organized the tutorial helpers into separate modules and created detailed, step-by-step guidance for users. Please update the PR description with the requested information, and then this PR should be ready for approval. |
|
Thank you for your contribution adding a tutorial feature to the new builder interface! This looks like a comprehensive implementation of an interactive tutorial system that will help users understand how to use the builder. However, before we can merge this PR, a few things need to be addressed: Missing PR Description
Incomplete Checklist
Your code looks well-structured with a comprehensive implementation of the tutorial system. The tutorial steps, helpers, and styles are organized in a maintainable way. I particularly like the attention to detail with the different tutorial steps and the visual guidance provided to users. Once you've updated the PR description and completed the checklist, we'll be happy to review this again for merging. |
|
Thank you for adding the tutorial feature to the new builder! This looks like a comprehensive implementation that will help users get started with building agents. However, before we can merge this PR, please update the PR description to:
Also, could you provide some details about how you tested this feature? For example:
The code changes themselves look good - I like how you've structured the tutorial with separate steps and helper functions, and the data-id attributes should make the tutorial elements easy to target. |
|
Hi @Abhi1992002, thanks for adding this comprehensive tutorial to the frontend builder! PR Description IssuesBefore this can be merged, you'll need to update your PR description with the following:
Code ImplementationThe code itself looks well-structured and comprehensive. You've created a complete tutorial system with:
The implementation appears to follow best practices and integrates well with the existing codebase. Once you've updated the PR description with the missing information and completed the checklist, this should be ready for review again. Let me know if you have any questions! |
|
Thank you for implementing this comprehensive tutorial for the new builder interface! The code implementation looks well-structured and thorough, with a good separation of concerns between the different parts of the tutorial system. However, before this PR can be merged, there are a few issues that need to be addressed: Missing PR Description Information
Suggestions for Test PlanYour test plan should include steps like:
Other NotesThe implementation itself looks good and aligns with the codebase's patterns and practices. I particularly like:
Once you've addressed the PR description issues, this should be ready to merge. |
github-actions
bot
added
the
conflicts
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
…feature flags - Added a "Start Tutorial" button in the CustomControls component to toggle tutorial state. - Updated TallyPopup to prevent tutorial display in the new builder view. - Enabled feature flags for the new flow editor and builder view switch.
- Added `forceOpenBlockMenu` state to control BlockMenu visibility based on tutorial status. - Updated `CustomControls` to start the tutorial and set the tutorial running state when the "Start Tutorial" button is clicked. - Improved BlockMenu behavior to respect the new `forceOpenBlockMenu` state for better user experience.
- Added `data-id` attributes to various components for improved accessibility and testing. - Updated tutorial steps to include new interactions and better guidance for users. - Enhanced control panel functionality to support new tutorial features and improve user experience.
- Introduced BLOCK_IDS for better management of tutorial block identifiers. - Implemented prefetching of Agent Input and Agent Output blocks at the start of the tutorial. - Updated tutorial steps to guide users through adding and configuring Agent Input and Output blocks. - Enhanced connection checks between blocks to improve user experience during the tutorial.
- Added `data-id` attributes to custom nodes for improved accessibility and testing. - Updated tutorial constants to include selectors for custom nodes. - Removed unused tutorial helper functions and steps to streamline the tutorial experience. - Enhanced the NodeContainer component to support new data attributes for better identification.
…a attributes - Added `data-id` attributes to the OutputHandler component for better identification. - Updated tutorial constants with new selectors for output handlers and input fields. - Modified tutorial steps to utilize new selectors for improved user guidance during connections. - Enhanced modal overlay padding for better visual alignment in tutorial steps.
- Integrated tutorial features to force open the run input dialog based on tutorial state. - Updated the RunInputDialog to track input values for tutorial progress. - Added data attributes for better accessibility and testing in various components. - Improved connection status handling and visual feedback during tutorial steps. - Enhanced the run steps to include checks for input values and execution feedback.
Abhi1992002
force-pushed
the
abhimanyuyadav/open-2840-add-tutorial-in-new-builder
branch
from
78c3fab to
7166748
Compare
github-actions
bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
- Integrated new tutorial steps for connecting multiple Calculator blocks. - Added data attributes for improved accessibility and testing across various components. - Updated tutorial constants and selectors to reflect new component structures. - Enhanced user guidance during tutorial interactions, including connection and execution steps. - Streamlined tutorial steps to focus on the new Calculator functionality and user experience.
…perience - Added new icons for Builder Actions, Block & Save Panel, Canvas Controls, and Info sections to improve visual guidance in the tutorial. - Removed outdated CSS styles related to the tutorial, streamlining the stylesheet for better maintainability. - Adjusted CSS properties for Shepherd.js elements to enhance layout and spacing in the tutorial flow. - Updated tutorial steps to ensure consistency and clarity in user interactions.
Abhi1992002
requested review from
0ubbe,
kcze and
majdyz
and removed request for
a team,
kcze and
majdyz
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/index.ts
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🤖 Fix all issues with AI agents
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts:
- Line 14: Fix the typo in the inline comment that currently reads "Paricular
field selector" by updating it to "Particular field selector"; locate the
comment in the FlowEditor tutorial constants file (look for the comment above
the field selector-related constants) and correct the spelling only.
- Line 11: The OUTPUT_NODE constant's selector string includes a trailing space
('[data-id="custom-node-3 "]') which prevents matching elements with
data-id="custom-node-3"; update the OUTPUT_NODE constant in constants.ts
(OUTPUT_NODE) to remove the extra space inside the quotes so the selector is
'[data-id="custom-node-3"]'.
- Line 26: Rename the constant OUTPUT_VALUE_INPUT_HANDLEER to
OUTPUT_VALUE_INPUT_HANDLER and update any references to it (e.g., imports or
usages in the FlowEditor tutorial code) so the identifier is spelled correctly;
ensure the string value '[data-tutorial-id="label-3-root_value"]' remains
unchanged and run tests/compile to catch any missed references.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/connections.ts:
- Around line 11-26: The exported isConnectionMade function is dead or flawed:
either remove the unused export, or modify isConnectionMade to accept concrete
node IDs (instead of block IDs) or handle multiple nodes per block by using
nodes.filter to collect all sourceNodes and targetNodes and then verify any edge
links any sourceNode.id to any targetNode.id (using
useEdgeStore.getState().edges and useNodeStore.getState().nodes); update callers
to pass node IDs if you choose the node-ID approach and keep the export if it
will be used.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts:
- Around line 70-79: The selector used in highlightFirstBlockInSearch currently
queries TUTORIAL_SELECTORS.BLOCK_CARD_PREFIX globally; narrow it to only
search-result blocks by querying the search results container for block cards
(e.g., '[data-id="blocks-control-search-results"] [data-id^="block-card-"]').
Update the selector in highlightFirstBlockInSearch to scope the query to the
search results element so only blocks inside that panel are found, then keep the
existing logic that adds CSS_CLASSES.PULSE and calls scrollIntoView.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts:
- Around line 177-221: The when.show handler registers a useNodeStore.subscribe
and stores its unsubscribe as (tour.getCurrentStep() as any)._nodeUnsubscribe
but there is no when.hide to clean it up; add a when.hide handler for this step
that retrieves the stored unsubscribe (if any), calls it, clears the
_nodeUnsubscribe property, and performs the same UI cleanup (enableAllBlocks()
and forceBlockMenuOpen(false)) so the subscription is removed if the user
cancels or navigates away. Ensure you reference the same identifiers
(useNodeStore.subscribe, _nodeUnsubscribe, enableAllBlocks, forceBlockMenuOpen,
tour.next) and guard against calling an already-invoked unsubscribe.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/completion.ts:
- Line 3: The parameter type for createCompletionSteps is currently loose (tour:
any); change it to use the Tour type from shepherd.js for proper type safety by
importing Tour from 'shepherd.js' and updating the signature to use Tour (i.e.,
createCompletionSteps(tour: Tour): StepOptions[]). Ensure any places that call
tour methods inside createCompletionSteps still compile and fix any minor type
mismatches exposed by the stronger type.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.ts:
- Line 60: The beforeShowPromise in the save-details tutorial step currently
returns waitForElement(TUTORIAL_SELECTORS.SAVE_CONTENT) without handling
rejections, causing unhandled promise rejections if the element never appears;
make it consistent with the open-save step by attaching a rejection handler
(e.g., .catch(() => {})) or otherwise handling the error so the tutorial flow
won't break—update the beforeShowPromise callback referenced by the save-details
step to call waitForElement(TUTORIAL_SELECTORS.SAVE_CONTENT).catch(() => {}) (or
an equivalent handler).
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts:
- Around line 162-182: The polling in beforeShowPromise uses checkNode and can
hang forever; add a watchdog timeout (e.g., 5–10s) and stop polling when
expired: start a timeout timer when beforeShowPromise begins, clear it when
resolved, and if it fires reject or resolve with a fallback so the tutorial
proceeds; update checkNode to stop calling setTimeout once the timeout has
elapsed, reference the beforeShowPromise function, the checkNode inner function,
getSecondCalculatorNode(), and the
`[data-id="form-creator-container-${secondNode.id}-node"]` selector when
implementing this change.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts:
- Around line 54-67: The banner() function currently interpolates icon and
content directly into HTML; add a JSDoc above banner() that explicitly states
icon and content MUST be developer-controlled hardcoded values (no
user-controlled input), and mention the safe alternative: if you ever need to
render dynamic/user data, use an HTML-escape helper (e.g., escapeHtml) for
content or render SVG/icon nodes safely instead of string interpolation; update
the docblock to reference banner() and bannerStyles so future maintainers know
the constraint and the fallback mitigation.
🧹 Nitpick comments (45)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (1)
26-29: LGTM! Minor style nit: template literal is unnecessary for a static string.The
data-tutorial-idattribute is correctly placed for tutorial targeting. Consider using a plain string instead of template literal since the value is static:- data-tutorial-id={`node-output`} + data-tutorial-id="node-output"autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx (1)
49-53: LGTM with a note on selector robustness.The
data-tutorial-idattribute placement is appropriate for tutorial targeting. However,fieldTitlemay contain dots or spaces (e.g., from nested properties or schema titles), which could complicate CSS attribute selectors if the tutorial needs to target specific fields.If precise targeting becomes problematic, consider using
fullKeyinstead or sanitizingfieldTitleto remove special characters:- data-tutorial-id={`output-handler-${nodeId}-${fieldTitle}`} + data-tutorial-id={`output-handler-${nodeId}-${fullKey}`}This is optional unless the tutorial step definitions encounter issues selecting these elements.
autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSearchBar/BlockMenuSearchBar.tsx (1)
3-5: Consider migrating away from legacy components.Lines 3 and 5 import from
@/components/__legacy__/ui/, which the coding guidelines indicate should not be used. While this is pre-existing code and outside the scope of this PR, consider migrating to the design system components fromsrc/components/(atoms, molecules, organisms) in a follow-up.As per coding guidelines: "Never use
src/components/__legacy__/*or deprecatedBackendAPIin frontend."autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx (1)
9-18: Consider migrating away from legacy components.This file uses several components from
@/components/__legacy__/ui/(Label, ScrollArea, Sheet, etc.). As per coding guidelines, these should be migrated to the design system components fromsrc/components/when feasible.This is pre-existing code and not introduced by this PR, so it can be addressed in a future cleanup effort.
autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/Block.tsx (1)
1-2: Consider migrating away from legacy UI components.As per coding guidelines,
src/components/__legacy__/*should not be used in frontend code. While this is pre-existing in this file and not introduced by your PR, consider migratingButtonandSkeletonimports to the design system components fromsrc/components/(atoms, molecules, organisms) in a follow-up.autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSidebar/BlockMenuSidebar.tsx (1)
4-4: Consider migrating away from legacy Skeleton component.The coding guidelines indicate that
@/components/__legacy__/*imports should not be used. While this import is pre-existing and not introduced by this PR, consider migrating to a design system component in a follow-up.autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/MenuItem.tsx (1)
3-3: Consider migrating to the design system Button component.The coding guidelines indicate that
@/components/__legacy__/*imports should not be used. A newerButtoncomponent exists at@/components/atoms/Button/Button.tsx(per the relevant code snippet). While this import is pre-existing, consider migrating in a follow-up to align with the design system. As per coding guidelines, frontend should use design system components fromsrc/components/(atoms, molecules, organisms).autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/UndoRedoButtons.tsx (2)
1-1: Legacy component import should be replaced.The
Separatoris imported from@/components/__legacy__/ui/separator. Per coding guidelines, legacy components should not be used. Consider migrating to a design system equivalent or creating a new atom component.
13-13: Consider using function declaration for component.Per coding guidelines, frontend components should use function declarations rather than arrow functions. This is a minor stylistic note that can be addressed in a follow-up.
♻️ Suggested refactor
-export const UndoRedoButtons = () => { +export function UndoRedoButtons() {autogpt_platform/frontend/src/components/molecules/TallyPoup/TallyPopup.tsx (1)
10-13: Minor redundancy:pathnameis fetched in both component and hook.The
useTallyPopuphook already callsusePathname()internally (seeuseTallyPopup.tsline 16). Consider either:
- Exposing
pathnamefrom the hook's return value, or- Moving the
isNewBuilderlogic into the hookThis avoids two separate
usePathname()calls in the same render tree.autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/RunGraph.tsx (1)
13-13: Consider using function declaration for component.Per coding guidelines, components should use function declarations rather than arrow functions. This is a minor stylistic note consistent with other components in the codebase.
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/completion.ts (3)
13-20: Redundant list bullet styling.The list items use both HTML
<li>elements and manual•bullet characters. Since<li>elements naturally render bullets when styled properly, consider removing the manual bullets.♻️ Suggested fix
- <ul class="text-[0.8125rem] text-green-600 m-0 pl-4 mt-2 space-y-1"> - <li>• Add blocks from the Block Menu</li> - <li>• Understand input and output handles</li> - <li>• Configure block values</li> - <li>• Connect blocks together</li> - <li>• Save and run your agent</li> - <li>• View execution status and output</li> + <ul class="text-[0.8125rem] text-green-600 m-0 pl-4 mt-2 space-y-1 list-disc"> + <li>Add blocks from the Block Menu</li> + <li>Understand input and output handles</li> + <li>Configure block values</li> + <li>Connect blocks together</li> + <li>Save and run your agent</li> + <li>View execution status and output</li>
26-35: Direct DOM manipulation for opacity could be fragile.The
when.showcallback directly mutates the modal overlay's style. This approach works but could be fragile if the class name changes or if multiple steps manipulate the same element. Consider:
- Using Shepherd's built-in modal options if available
- Adding/removing a CSS class instead of inline style manipulation
This is acceptable for now given Shepherd.js patterns, but worth noting for maintainability.
39-42: Restart action timing could be improved.The
setTimeoutdelay of 100ms is a magic number without explanation. Consider:
- Adding a comment explaining why the delay is needed (likely to allow cancel animation to complete)
- Using a named constant for the delay value
♻️ Suggested improvement
+const TOUR_RESTART_DELAY_MS = 100; // Allow cancel animation to complete { text: "Restart Tutorial", action: () => { tour.cancel(); - setTimeout(() => tour.start(), 100); + setTimeout(() => tour.start(), TOUR_RESTART_DELAY_MS); },autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/TitleField.tsx (1)
32-36: Undefined attribute value may render as string "undefined".When
nodeIdis falsy,tutorialIdbecomesundefined. In React, settingdata-tutorial-id={undefined}may still render the attribute with the literal string"undefined"depending on the React version and rendering context. This could interfere with tutorial selectors.Consider using a conditional spread or explicit null check:
♻️ Suggested fix
return ( - <div className="flex items-center" data-tutorial-id={tutorialId}> + <div className="flex items-center" {...(tutorialId && { 'data-tutorial-id': tutorialId })}>autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunGraph/useRunGraph.ts (1)
53-58: Consider using function declaration for handler.Based on coding guidelines, handlers should use function declarations rather than arrow functions.
♻️ Suggested refactor
- // Reset tutorial state when dialog closes - const handleSetOpenRunInputDialog = (isOpen: boolean) => { - setOpenRunInputDialog(isOpen); - if (!isOpen && forceOpenRunInputDialog) { - setForceOpenRunInputDialog(false); - } - }; + // Reset tutorial state when dialog closes + function handleSetOpenRunInputDialog(isOpen: boolean) { + setOpenRunInputDialog(isOpen); + if (!isOpen && forceOpenRunInputDialog) { + setForceOpenRunInputDialog(false); + } + }autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (1)
102-105: Remove development artifact comments.The
// <-- Add this linecomments appear to be leftover development notes and should be removed.♻️ Proposed cleanup
- CALCULATOR_NODE_FORM_CONTAINER: '[data-id^="form-creator-container-1-node"]', // <-- Add this line - AGENT_INPUT_NODE_FORM_CONTAINER: '[data-id^="form-creator-container-2-node"]', // <-- Add this line - AGENT_OUTPUT_NODE_FORM_CONTAINER: - '[data-id^="form-creator-container-3-node"]', // <-- Add this line + CALCULATOR_NODE_FORM_CONTAINER: '[data-id^="form-creator-container-1-node"]', + AGENT_INPUT_NODE_FORM_CONTAINER: '[data-id^="form-creator-container-2-node"]', + AGENT_OUTPUT_NODE_FORM_CONTAINER: '[data-id^="form-creator-container-3-node"]',autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/CustomControl.tsx (1)
35-38: Cleanup callback could be more defensive.Setting an empty callback on cleanup might cause issues if the tutorial system calls it after component unmount. Consider using a null check pattern.
♻️ Alternative cleanup pattern
useEffect(() => { setTutorialLoadingCallback(setIsTutorialLoading); - return () => setTutorialLoadingCallback(() => {}); + return () => setTutorialLoadingCallback(null); }, []);This requires updating
setTutorialLoadingCallbackto acceptnulland adding a null check before invocation.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/tutorial.css (1)
1-149: CSS file is acceptable for third-party library styling.While the coding guidelines prefer Tailwind CSS, this raw CSS file is justified for overriding Shepherd.js's built-in styles. The styles correctly use the project's design tokens (zinc color palette, Geist/Poppins fonts) and the class names align with
CSS_CLASSESin constants.ts.Consider adding a comment at the top of the file explaining why raw CSS is used here.
♻️ Add explanatory comment
+/** + * Custom styles for Shepherd.js tutorial tour. + * Raw CSS is used here because Shepherd.js requires CSS overrides + * that cannot be achieved with Tailwind utility classes alone. + */ + .new-builder-tutorial-highlight * {autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (2)
48-54: Bidirectional partial match logic may be too permissive.The condition
currentValue.includes(target) || target.includes(currentValue)allows matches in both directions. For example, iftarget="Calculator"and user types"Calc",target.includes(currentValue)is true. But if user types"CalculatorBlock",currentValue.includes(target)would also match. Consider if this is the intended behavior.Also, the magic number
4for minimum characters could be extracted to a constant.♻️ Suggested clarification
+// Minimum characters required before considering a match +const MIN_SEARCH_CHARS = 4; + export const waitForInputValue = ( selector: string, targetValue: string, timeout = 30000, ): Promise<void> => { return new Promise((resolve) => { const startTime = Date.now(); const checkInput = () => { const input = document.querySelector(selector) as HTMLInputElement; if (input) { const currentValue = input.value.toLowerCase().trim(); const target = targetValue.toLowerCase().trim(); - if (currentValue.includes(target) || target.includes(currentValue)) { - // Check if user has typed enough characters (at least 4 chars or the full string) - if (currentValue.length >= 4 || currentValue === target) { + // Match when target starts with what user typed (prefix match) + if (target.startsWith(currentValue) || currentValue === target) { + if (currentValue.length >= MIN_SEARCH_CHARS || currentValue === target) { resolve(); return; }
155-180: Potential race condition in observeElement.The immediate check on lines 173-177 could trigger the callback, but if an element appears between setting up the observer and the immediate check, the callback might be invoked twice before
disconnect()is called.♻️ Suggested fix
export const observeElement = ( selector: string, callback: (element: Element) => void, ): MutationObserver => { + let called = false; + + const invokeCallback = (element: Element) => { + if (called) return; + called = true; + callback(element); + }; + const observer = new MutationObserver((mutations, obs) => { const element = document.querySelector(selector); if (element) { - callback(element); + invokeCallback(element); obs.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true, }); // Also check immediately const element = document.querySelector(selector); if (element) { - callback(element); + invokeCallback(element); observer.disconnect(); } return observer; };autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/tutorial.ts (1)
60-71: Consider consolidating waitForElement implementations.The legacy builder has its own
waitForElementwith a hardcoded 10ms polling interval, while the FlowEditor tutorial helper (inFlowEditor/tutorial/helpers/dom.ts) uses a configurable 50ms interval with timeout support. Both tutorials coexist in the codebase. If they will continue to coexist, consider importing from the shared helper for consistency and to avoid maintaining multiple polling implementations.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts (1)
6-31: Consider extracting shared cleanup logic to reduce duplication.All three handlers share identical cleanup logic (close menus, remove highlights, enable blocks). Extracting this into a shared helper would improve maintainability:
♻️ Suggested refactor
+const resetTutorialState = () => { + closeBlockMenu(); + closeSaveControl(); + forceSaveOpen(false); + removeAllHighlights(); + enableAllBlocks(); +}; + export const handleTutorialCancel = (_tour?: any) => { - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); + resetTutorialState(); storage.set(Key.SHEPHERD_TOUR, "canceled"); }; export const handleTutorialSkip = (_tour?: any) => { - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); + resetTutorialState(); storage.set(Key.SHEPHERD_TOUR, "skipped"); }; export const handleTutorialComplete = () => { - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); + resetTutorialState(); storage.set(Key.SHEPHERD_TOUR, "completed"); };Also, the
_tourparameter is unused but may be required by Shepherd.js callback signatures. If so, consider addinghandleTutorialComplete(_tour?: any)for consistency, or add a brief comment explaining the signature requirement.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (1)
103-110: Consider adding a null check before invokingclick().While the
if (fitViewButton)check exists, the cast toHTMLButtonElementhappens before the null check. This is fine, but for defensive coding, you could move the cast inside:♻️ Minor defensive improvement
export const fitViewToScreen = () => { - const fitViewButton = document.querySelector( - TUTORIAL_SELECTORS.FIT_VIEW_BUTTON, - ) as HTMLButtonElement; - if (fitViewButton) { + const fitViewButton = document.querySelector( + TUTORIAL_SELECTORS.FIT_VIEW_BUTTON, + ); + if (fitViewButton instanceof HTMLButtonElement) { fitViewButton.click(); } };autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/blocks.ts (1)
70-73: The reliance on array order is safe in this tutorial context, but consider documenting the assumption or using a more explicit approach if this logic expands.The function assumes calculator nodes maintain insertion order (with the second added at index
[1]). While this is valid in the current tutorial workflow—where blocks are added sequentially viaaddSecondCalculatorBlock()with defensive checks—it creates implicit ordering assumptions. If tutorial steps change or this helper is reused elsewhere, this could fail silently if nodes are reordered.Consider adding a comment documenting that this assumes insertion order, or refactor to store the second calculator's ID explicitly when created (e.g., via
addSecondCalculatorBlock()).autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
1-25: Raw SVG strings are acceptable for Shepherd.js HTML content, but add a maintenance note.Per coding guidelines, the frontend should use Phosphor Icons from
@phosphor-icons/react. However, since Shepherd.js step content uses raw HTML template strings (as seen inwelcome.ts), embedding SVG strings is a reasonable workaround.Consider adding a comment documenting:
- Why raw SVGs are used instead of React components (Shepherd.js limitation)
- The source version of these icons for future updates
📝 Suggested documentation improvement
-// These are SVG Phosphor icons +/** + * Raw SVG strings for Phosphor icons used in Shepherd.js tutorial steps. + * + * Note: We use raw SVG strings here instead of @phosphor-icons/react components + * because Shepherd.js step content requires HTML template strings, not React elements. + * + * Source: Phosphor Icons (https://phosphoricons.com/) - Regular weight, 16x16/20x20 + * If updating icons, copy the SVG markup from the Phosphor website. + */ export const ICONS = {autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/welcome.ts (1)
11-11: Use proper Shepherd.jsTourtype instead ofanyfor better type safety.The
tourparameter is typed asany, which loses type information. Shepherd.js v14.5.1 exports aTourtype that should be used here. The file already imports from "shepherd.js", so add theTourtype import alongside the existingStepOptionsimport.-import { StepOptions } from "shepherd.js"; +import { StepOptions, Tour } from "shepherd.js"; -export const createWelcomeSteps = (tour: any): StepOptions[] => [ +export const createWelcomeSteps = (tour: Tour): StepOptions[] => [autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.ts (1)
11-11: Consider adding type fortourparameter.The
tourparameter is typed asany. While Shepherd.js types can be complex, you could useShepherd.Tourfor better type safety.Proposed improvement
+import Shepherd from "shepherd.js"; import { StepOptions } from "shepherd.js"; // ... -export const createSaveSteps = (tour: any): StepOptions[] => [ +export const createSaveSteps = (tour: Shepherd.Tour): StepOptions[] => [Also applies to: 19-19, 74-74
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts (1)
69-72: Minor: Redundant bullet markers in list.The
<ul>already implies list items, and the<li>elements include explicit•characters. This creates visual redundancy if CSS adds default list-style bullets.Suggested fix
- <ul class="text-[0.8125rem] text-zinc-500 m-0 mt-1 pl-4"> - <li>• The calculated result</li> - <li>• Execution timestamp</li> + <ul class="text-[0.8125rem] text-zinc-500 m-0 mt-1 pl-4 list-disc"> + <li>The calculated result</li> + <li>Execution timestamp</li>autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts (2)
170-172: Consider using a scoped reference instead of pollutingwindow.Storing the interval ID on
windowas__tutorialCheckIntervalworks but pollutes the global namespace. A module-scoped variable or WeakMap keyed by tour instance would be cleaner.Alternative approach
+// Module-scoped storage for cleanup +let checkInterval: NodeJS.Timeout | null = null; + export const createConfigureCalculatorSteps = (tour: any): StepOptions[] => [ { // ... when: { show: () => { // ... - const checkInterval = setInterval(() => { + checkInterval = setInterval(() => { // ... }, 300); - - // Store interval ID for cleanup - (window as any).__tutorialCheckInterval = checkInterval; }, hide: () => { removeAllHighlights(); - if ((window as any).__tutorialCheckInterval) { - clearInterval((window as any).__tutorialCheckInterval); - delete (window as any).__tutorialCheckInterval; + if (checkInterval) { + clearInterval(checkInterval); + checkInterval = null; } }, },Also applies to: 175-178
109-120: Duplicate validation logic between polling and button action.The same validation checks for
hasA,hasB, andhasOpare duplicated in both the polling interval (Lines 109-120) and the button action (Lines 194-205). Consider extracting this into a helper function.Proposed refactor
+// Helper to check if all required fields are filled +const checkFieldCompletion = (node: any) => { + const hardcodedValues = node?.data?.hardcodedValues || {}; + const hasA = hardcodedValues.a !== undefined && hardcodedValues.a !== null && hardcodedValues.a !== ""; + const hasB = hardcodedValues.b !== undefined && hardcodedValues.b !== null && hardcodedValues.b !== ""; + const hasOp = hardcodedValues.operation !== undefined && hardcodedValues.operation !== null && hardcodedValues.operation !== ""; + return { hasA, hasB, hasOp, allComplete: hasA && hasB && hasOp }; +}; // In the polling interval: - const hardcodedValues = node.data?.hardcodedValues || {}; - const hasA = /* ... */; - const hasB = /* ... */; - const hasOp = /* ... */; - const allComplete = hasA && hasB && hasOp; + const { hasA, hasB, hasOp, allComplete } = checkFieldCompletion(node); // In the button action: - const hardcodedValues = node.data?.hardcodedValues || {}; - const hasA = /* ... */; - const hasB = /* ... */; - const hasOp = /* ... */; - if (hasA && hasB && hasOp) { + const { allComplete } = checkFieldCompletion(node); + if (allComplete) { tour.next(); }Also applies to: 194-205
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/index.ts (1)
26-39: Consider using function declaration instead of arrow function for exported function.Per coding guidelines, function declarations are preferred over arrow functions for components and handlers in frontend code. However, this is a minor stylistic point.
♻️ Suggested refactor
-export const startTutorial = async () => { +export async function startTutorial() { isTutorialLoading = true; tutorialLoadingCallback?.(true); // ... rest of function -}; +}autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/index.ts (1)
12-22: Consider adding proper typing for thetourparameter.Using
anyfor thetourparameter loses type safety. Consider importing and usingShepherd.Tourtype.♻️ Suggested improvement
+import Shepherd from "shepherd.js"; import { StepOptions } from "shepherd.js"; // ... other imports -export const createTutorialSteps = (tour: any): StepOptions[] => [ +export function createTutorialSteps(tour: Shepherd.Tour): StepOptions[] { + return [ ...createWelcomeSteps(tour), ...createBlockMenuSteps(tour), ...createBlockBasicsSteps(tour), ...createConfigureCalculatorSteps(tour), ...createSecondCalculatorSteps(tour), ...createConnectionSteps(tour), ...createSaveSteps(tour), ...createRunSteps(tour), ...createCompletionSteps(tour), -]; + ]; +}autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.ts (1)
77-80: Silent error swallowing may hide issues during tutorial execution.The
.catch(() => {})silently ignores errors when waiting for elements. Consider logging these failures for debugging purposes, especially during development.♻️ Suggested improvement
beforeShowPromise: () => waitForElement(TUTORIAL_SELECTORS.NODE_INPUT_HANDLE, 3000).catch( - () => {}, + (err) => { + console.debug("Tutorial: Input handle not found, continuing...", err); + }, ),autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/save.ts (1)
45-49: Inconsistent selector usage - consider using a constant from TUTORIAL_SELECTORS.The selector
'[data-tutorial-id="save-control-version-output"]'is hardcoded here while other helpers useTUTORIAL_SELECTORSconstants. Consider adding this selector to the constants file for consistency and maintainability.♻️ Suggested improvement
Add to
constants.ts:SAVE_VERSION_OUTPUT: '[data-tutorial-id="save-control-version-output"]',Then update this file:
export const isAgentSaved = (): boolean => { const versionInput = document.querySelector( - '[data-tutorial-id="save-control-version-output"]', + TUTORIAL_SELECTORS.SAVE_VERSION_OUTPUT, ) as HTMLInputElement; return !!(versionInput && versionInput.value && versionInput.value !== "-"); };autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/connections.ts (2)
117-127: Store subscription cleanup pattern works but uses type assertion.Storing the unsubscribe function on the step object with
as anyis functional but loses type safety. Consider using a WeakMap or module-level Map keyed by step ID for cleaner cleanup management.
264-267: Unnecessary Promise.resolve() wrapping.The
beforeShowPromisealready callsfitViewToScreen()which is synchronous. Thereturn Promise.resolve()is redundant since async functions already return promises.♻️ Suggested fix
beforeShowPromise: async () => { fitViewToScreen(); - return Promise.resolve(); },autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts (1)
140-146: Avoid usingwindowobject for storing tutorial state.Using
(window as any).__tutorialCalcIntervalpollutes the global namespace and is a code smell. Consider using a module-level variable or a Map keyed by step ID instead.♻️ Suggested improvement
+// At module level +let calcCheckInterval: ReturnType<typeof setInterval> | null = null; // In show handler: - (window as any).__tutorialCalcInterval = checkForCalculator; + calcCheckInterval = checkForCalculator; // In hide handler: - if ((window as any).__tutorialCalcInterval) { - clearInterval((window as any).__tutorialCalcInterval); - delete (window as any).__tutorialCalcInterval; + if (calcCheckInterval) { + clearInterval(calcCheckInterval); + calcCheckInterval = null; }autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (1)
1-78: This barrel file pattern may conflict with frontend coding guidelines.Based on learnings, the guideline states "No barrel files or index.ts re-exports in frontend." However, this is a self-contained feature module where the barrel provides a clean API surface. Consider whether the convenience of centralized imports outweighs the guideline in this context.
If strict adherence is required, consumers would import directly from each helper file (e.g.,
from "./helpers/dom",from "./helpers/blocks").autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts (6)
18-36: Mixed return types may cause issues with Shepherd.js attachTo.The function returns either
HTMLElementorstring, but when returning a selector string (lines 26, 35), Shepherd.js may not find the element if it doesn't exist yet. Consider consistently returning a function for dynamic resolution or ensuring the element exists before returning.
54-70: Static analysis: innerHTML usage is safe here but consider textContent.The static analyzer flagged
innerHTMLusage. While the content is hardcoded (not user input) so XSS risk is minimal, usingtextContentwould be more defensive and align with best practices.🔧 Suggested fix using textContent
if (reqBox && reqTitle) { reqBox.classList.remove("bg-amber-50", "ring-amber-200"); reqBox.classList.add("bg-green-50", "ring-green-200"); reqTitle.classList.remove("text-amber-600"); reqTitle.classList.add("text-green-600"); - reqTitle.innerHTML = "🎉 Hurray! All values are completed!"; + reqTitle.textContent = "🎉 Hurray! All values are completed!"; if (reqList) { reqList.classList.add("hidden"); } }
72-88: Same innerHTML concern as above—prefer textContent for consistency.🔧 Suggested fix
- reqTitle.innerHTML = "⚠️ Required to continue:"; + reqTitle.textContent = "⚠️ Required to continue:";
93-93: Typetourparameter instead of usingany.Using
anyloses type safety. Import and useShepherd.Tourfrom shepherd.js for proper typing.🔧 Suggested fix
+import Shepherd from "shepherd.js"; import { StepOptions } from "shepherd.js"; // ... -export const createSecondCalculatorSteps = (tour: any): StepOptions[] => [ +export const createSecondCalculatorSteps = (tour: Shepherd.Tour): StepOptions[] => [
253-259: Global window property for interval storage is fragile.Using
(window as any).__tutorialSecondCalcIntervalworks but pollutes the global namespace and bypasses type safety. Consider using a module-scoped variable or a WeakMap keyed by the tour instance for cleaner state management.
271-288: Continue button silently fails when secondNode is missing.If
getSecondCalculatorNode()returnsundefined(line 273), the function exits silently with no user feedback. Consider logging a warning or showing a toast to help diagnose issues during the tutorial.
...rm/frontend/src/app/(platform)/build/components/FlowEditor/Flow/components/CustomControl.tsx
Show resolved
Hide resolved
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts
Show resolved
Hide resolved
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts
Show resolved
Hide resolved
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts
Show resolved
Hide resolved
...form/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/connections.ts
Show resolved
Hide resolved
...tform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts
Show resolved
Hide resolved
...latform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/completion.ts
Show resolved
Hide resolved
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.ts
Show resolved
Hide resolved
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts
Show resolved
Hide resolved
- Removed unnecessary comments and documentation from tutorial helper files to enhance code clarity and maintainability. - Simplified tutorial steps by eliminating redundant comments and improving the overall structure. - Updated tutorial steps to ensure a more concise and focused user experience during the tutorial flow. - Enhanced the organization of helper functions related to canvas, connections, DOM manipulation, highlights, and state management.
...t_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts:
- Around line 164-197: The step's show handler subscribes via
useNodeStore.subscribe and saves the unsubscribe to (tour.getCurrentStep() as
any)._nodeUnsubscribe but never cleans it up; add a when.hide handler that looks
up (tour.getCurrentStep() as any)._nodeUnsubscribe and, if present, calls it and
clears the reference, and also restore UI state by calling enableAllBlocks() and
forceBlockMenuOpen(false) so the subscription is removed when the user navigates
away without adding the calculator block.
In
@autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts:
- Around line 147-166: The beforeShowPromise polling in beforeShowPromise uses
checkNode with setTimeout loops and can hang forever; modify beforeShowPromise
(and the inner checkNode logic) to add a maximum wait (e.g., timeoutMs or
maxAttempts) and stop polling when that limit is reached: track elapsed time or
attempt count when calling getSecondCalculatorNode and checking the form
container, and if exceeded reject or resolve to a failure state (and clear any
pending timers) so the tutorial doesn't wait indefinitely; ensure
fitViewToScreen remains called and that any cleanup (clearing timers) happens in
both success and timeout paths.
🧹 Nitpick comments (12)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts (3)
6-19: Consider using module-level variables instead ofwindowglobals.Storing interval IDs on
(window as any)pollutes the global namespace and bypasses TypeScript's type checking. A cleaner approach is to use module-level variables:♻️ Suggested refactor
+// Module-level interval storage +const tutorialIntervals: Record<string, ReturnType<typeof setInterval> | undefined> = { + calc: undefined, + check: undefined, + secondCalc: undefined, +}; + +export function setTutorialInterval( + key: keyof typeof tutorialIntervals, + id: ReturnType<typeof setInterval>, +) { + tutorialIntervals[key] = id; +} + -const clearTutorialIntervals = () => { - const intervalKeys = [ - "__tutorialCalcInterval", - "__tutorialCheckInterval", - "__tutorialSecondCalcInterval", - ]; - - intervalKeys.forEach((key) => { - if ((window as any)[key]) { - clearInterval((window as any)[key]); - delete (window as any)[key]; - } - }); -}; +function clearTutorialIntervals() { + Object.keys(tutorialIntervals).forEach((key) => { + const k = key as keyof typeof tutorialIntervals; + if (tutorialIntervals[k]) { + clearInterval(tutorialIntervals[k]); + tutorialIntervals[k] = undefined; + } + }); +}
21-49: Reduce code duplication across lifecycle handlers.The three handlers share identical cleanup logic, differing only in the storage value. Extract the common sequence into a shared helper. Based on learnings, use function declarations instead of arrow functions for handlers.
♻️ Suggested refactor
+function cleanupTutorialState() { + clearTutorialIntervals(); + closeBlockMenu(); + closeSaveControl(); + forceSaveOpen(false); + removeAllHighlights(); + enableAllBlocks(); +} + -export const handleTutorialCancel = (_tour?: any) => { - clearTutorialIntervals(); - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); - storage.set(Key.SHEPHERD_TOUR, "canceled"); -}; +export function handleTutorialCancel() { + cleanupTutorialState(); + storage.set(Key.SHEPHERD_TOUR, "canceled"); +} -export const handleTutorialSkip = (_tour?: any) => { - clearTutorialIntervals(); - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); - storage.set(Key.SHEPHERD_TOUR, "skipped"); -}; +export function handleTutorialSkip() { + cleanupTutorialState(); + storage.set(Key.SHEPHERD_TOUR, "skipped"); +} -export const handleTutorialComplete = () => { - clearTutorialIntervals(); - closeBlockMenu(); - closeSaveControl(); - forceSaveOpen(false); - removeAllHighlights(); - enableAllBlocks(); - storage.set(Key.SHEPHERD_TOUR, "completed"); -}; +export function handleTutorialComplete() { + cleanupTutorialState(); + storage.set(Key.SHEPHERD_TOUR, "completed"); +}
21-21: Remove the unused_tourparameter or import and properly type it asTourfrom Shepherd.js.The
_tourparameter is unused in bothhandleTutorialCancelandhandleTutorialSkip. Shepherd.js events "complete" and "cancel" don't pass any arguments to callbacks (both have() => voidsignatures), so the parameter serves no purpose. Either remove it entirely or, if you intend to keep it for future flexibility, properly type it asTourfrom the shepherd.js package instead ofany.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts (2)
63-63: Consider typing thetourparameter.Using
anyfor thetourparameter loses type safety. Shepherd.js provides aTourtype that can be used here.Suggested improvement
+import Shepherd from "shepherd.js"; +import { StepOptions } from "shepherd.js"; -export const createConfigureCalculatorSteps = (tour: any): StepOptions[] => [ +export const createConfigureCalculatorSteps = (tour: Shepherd.Tour): StepOptions[] => [
96-109: Extract duplicated validation logic into a helper.The same validation logic for
hasA,hasB, andhasOpis repeated in both the polling interval (lines 96-109) and the Continue button action (lines 176-188). Consider extracting this into a helper function to reduce duplication.Example extraction
const getNodeCompletionStatus = (node: Node | null) => { if (!node) return { hasA: false, hasB: false, hasOp: false, allComplete: false }; const hardcodedValues = node.data?.hardcodedValues || {}; const hasA = hardcodedValues.a !== undefined && hardcodedValues.a !== null && hardcodedValues.a !== ""; const hasB = hardcodedValues.b !== undefined && hardcodedValues.b !== null && hardcodedValues.b !== ""; const hasOp = hardcodedValues.operation !== undefined && hardcodedValues.operation !== null && hardcodedValues.operation !== ""; return { hasA, hasB, hasOp, allComplete: hasA && hasB && hasOp }; };Also applies to: 176-188
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (1)
57-65: Add explicit return types for clarity.The return types for
getFirstNodeandgetNodeByIdare inferred but could be explicit for better documentation.Suggested types
-export const getFirstNode = () => { +export const getFirstNode = (): ReturnType<typeof useNodeStore.getState>['nodes'][number] | null => { const nodes = useNodeStore.getState().nodes; return nodes.length > 0 ? nodes[0] : null; }; -export const getNodeById = (nodeId: string) => { +export const getNodeById = (nodeId: string): ReturnType<typeof useNodeStore.getState>['nodes'][number] | undefined => { const nodes = useNodeStore.getState().nodes; return nodes.find((n) => n.id === nodeId); };autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (2)
3-22: Inconsistent timeout behavior across wait functions.
waitForElementrejects on timeout whilewaitForSearchResultandwaitForAnyBlockCardresolve withnull. This inconsistency could lead to unhandled promise rejections if callers don't use.catch(). Consider aligning the behavior or documenting the difference.Option: Resolve with null for consistency
export const waitForElement = ( selector: string, timeout = 10000, -): Promise<Element> => { - return new Promise((resolve, reject) => { +): Promise<Element | null> => { + return new Promise((resolve) => { const startTime = Date.now(); const checkElement = () => { const element = document.querySelector(selector); if (element) { resolve(element); } else if (Date.now() - startTime > timeout) { - reject(new Error(`Element ${selector} not found within ${timeout}ms`)); + resolve(null); } else { setTimeout(checkElement, TUTORIAL_CONFIG.ELEMENT_CHECK_INTERVAL); } }; checkElement(); }); };
38-42: Magic number 4 for input length threshold should be documented.The
currentValue.length >= 4check is unclear without context. Consider adding a comment explaining this heuristic or extracting it as a named constant.+ // Minimum characters before considering a partial match valid + const MIN_PARTIAL_MATCH_LENGTH = 4; - if (currentValue.length >= 4 || currentValue === target) { + if (currentValue.length >= MIN_PARTIAL_MATCH_LENGTH || currentValue === target) {autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts (2)
30-31: Silent error swallowing may hide issues during development.The
.catch(() => {})suppresses all errors fromwaitForElement. Consider logging in development mode or using a named error handler for easier debugging.beforeShowPromise: () => - waitForElement(TUTORIAL_SELECTORS.RUN_BUTTON, 3000).catch(() => {}), + waitForElement(TUTORIAL_SELECTORS.RUN_BUTTON, 3000).catch((err) => { + console.debug("Tutorial: Run button not found, continuing anyway", err); + }),
71-81: Nested setTimeout with waitForElement could be simplified.The 300ms delay before waiting for the element adds complexity. If this is intentional (e.g., waiting for DOM updates after run), consider documenting the reason.
beforeShowPromise: () => new Promise((resolve) => { + // Wait for execution to start and output to render setTimeout(() => { waitForElement(TUTORIAL_SELECTORS.FIRST_CALCULATOR_NODE_OUTPUT, 5000) .then(() => { fitViewToScreen(); resolve(undefined); }) .catch(resolve); }, 300); }),autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.ts (1)
28-33: Arbitrary delay after node detection should be documented.The 300ms delay on line 31 after
waitForNodeOnCanvasis presumably for DOM stabilization or animation completion. Consider adding a comment explaining the purpose.beforeShowPromise: async () => { closeBlockMenu(); await waitForNodeOnCanvas(5000); + // Allow time for node rendering and layout stabilization await new Promise((resolve) => setTimeout(resolve, 300)); fitViewToScreen(); },autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts (1)
32-79: Significant code duplication with configure-calculator.ts.The requirements HTML template,
updateToSuccessState, andupdateToWarningStatefunctions are nearly identical between this file andconfigure-calculator.ts. Consider extracting shared utilities.Suggested extraction to a shared module
Create a shared helper, e.g.,
tutorial/helpers/requirements-ui.ts:export const createRequirementsHtml = (id: string, requirements: Array<{id: string, label: string, example: string}>, note?: string) => `...`; export const updateToSuccessState = (boxId: string, listId: string) => { ... }; export const updateToWarningState = (boxId: string, listId: string) => { ... };This would reduce ~80 lines of duplication across the two files.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (17)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/connections.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/save.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/welcome.ts
✅ Files skipped from review due to trivial changes (1)
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/index.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/menu.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/welcome.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/save.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/save.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/connections.ts
- autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts
🧰 Additional context used
📓 Path-based instructions (6)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/generated/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
🧠 Learnings (3)
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add or update Storybook stories for UI components (pnpm storybook). Run Playwright E2E tests with pnpm test
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts
🧬 Code graph analysis (8)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts (1)
banner(54-67)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
ICONS(3-7)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (2)
fitViewToScreen(76-83)getFirstNode(57-60)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (4)
fitViewToScreen(42-42)getFirstNode(39-39)highlightElement(16-16)removeAllHighlights(17-17)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (1)
TUTORIAL_SELECTORS(8-114)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts (2)
highlightElement(25-30)removeAllHighlights(32-39)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts (1)
banner(54-67)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
ICONS(3-7)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (1)
TUTORIAL_SELECTORS(8-114)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (1)
waitForElement(3-22)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts (2)
highlightElement(25-30)removeAllHighlights(32-39)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (1)
fitViewToScreen(76-83)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.ts (7)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (1)
TUTORIAL_SELECTORS(8-114)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/menu.ts (1)
closeBlockMenu(12-15)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (2)
waitForNodeOnCanvas(4-30)fitViewToScreen(76-83)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts (2)
highlightElement(25-30)removeAllHighlights(32-39)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (1)
waitForElement(3-22)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts (1)
banner(54-67)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
ICONS(3-7)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts (1)
banner(54-67)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
ICONS(3-7)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (3)
TUTORIAL_SELECTORS(8-114)TUTORIAL_CONFIG(122-129)BLOCK_IDS(2-6)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (9)
highlightElement(16-16)removeAllHighlights(17-17)waitForElement(2-2)forceBlockMenuOpen(48-48)focusElement(6-6)disableOtherBlocks(14-14)pulseElement(18-18)enableAllBlocks(15-15)highlightFirstBlockInSearch(19-19)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/menu.ts (1)
forceBlockMenuOpen(4-6)autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
useNodeStore(77-379)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts (5)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (6)
getSecondCalculatorNode(30-30)addSecondCalculatorBlock(28-28)waitForNodesCount(37-37)fitViewToScreen(42-42)highlightElement(16-16)removeAllHighlights(17-17)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/blocks.ts (2)
getSecondCalculatorNode(70-73)addSecondCalculatorBlock(49-63)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/styles.ts (1)
banner(54-67)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/icons.ts (1)
ICONS(3-7)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts (2)
highlightElement(25-30)removeAllHighlights(32-39)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (1)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (2)
TUTORIAL_CONFIG(122-129)TUTORIAL_SELECTORS(8-114)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (3)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (7)
waitForNodeOnCanvas(36-36)waitForNodesCount(37-37)getNodesCount(38-38)getFirstNode(39-39)getNodeById(40-40)nodeHasValues(41-41)fitViewToScreen(42-42)autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
useNodeStore(77-379)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/constants.ts (2)
TUTORIAL_SELECTORS(8-114)TUTORIAL_CONFIG(122-129)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/state.ts (5)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/index.ts (6)
handleTutorialCancel(63-63)closeBlockMenu(50-50)closeSaveControl(56-56)forceSaveOpen(57-57)removeAllHighlights(17-17)enableAllBlocks(15-15)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/menu.ts (1)
closeBlockMenu(12-15)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/save.ts (2)
closeSaveControl(8-11)forceSaveOpen(13-15)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/highlights.ts (2)
removeAllHighlights(32-39)enableAllBlocks(13-23)autogpt_platform/frontend/src/services/storage/local-storage.ts (1)
storage(44-48)
🪛 ast-grep (0.40.4)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts
[warning] 38-38: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: reqTitle.innerHTML = "🎉 Hurray! All values are completed!"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 55-55: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: reqTitle.innerHTML = "
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 38-38: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: reqTitle.innerHTML = "🎉 Hurray! All values are completed!"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 55-55: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: reqTitle.innerHTML = "
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts
[warning] 56-56: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: reqTitle.innerHTML = "🎉 Hurray! All values are completed!"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 73-73: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: reqTitle.innerHTML = "
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 56-56: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: reqTitle.innerHTML = "🎉 Hurray! All values are completed!"
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
[warning] 73-73: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: reqTitle.innerHTML = "
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: test
- GitHub Check: chromatic
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🔇 Additional comments (9)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/configure-calculator.ts (2)
29-44: Static analysis false positive — innerHTML assigns hardcoded strings only.The
innerHTMLassignments on lines 39 and 56 use static emoji/text literals, not user input. This is safe and the XSS warning can be dismissed. UsingtextContentwould lose the emoji rendering in some edge cases; the current approach is acceptable.
153-159: Storing interval onwindowis a pragmatic workaround but consider alternatives.Using
(window as any).__tutorialCheckIntervalworks but pollutes the global namespace. The cleanup inhideis correct. An alternative would be storing the interval ID on the step object itself via Shepherd's step metadata, but the current approach is acceptable for tutorial code.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/canvas.ts (1)
4-30: Well-structured async polling with proper timeout handling.The
waitForNodeOnCanvasfunction correctly handles both the store state and DOM presence checks, with proper timeout resolution. The pattern is consistent across the helper functions.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/helpers/dom.ts (1)
126-150: Good MutationObserver pattern with immediate check.The
observeElementfunction correctly handles the race condition by checking for the element immediately after setting up the observer. The cleanup viaobs.disconnect()is proper.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/run.ts (1)
12-96: Run steps implementation looks correct.The two-step flow for running and viewing output is well-structured with appropriate highlighting, element waiting, and cleanup. The lifecycle hooks are properly implemented.
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-basics.ts (1)
14-113: Well-structured three-step block basics tutorial.The progression from focusing the new block to explaining input and output handles is logical and educational. The use of the
bannerhelper for the drag tip (line 91) enhances the instructional value.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts (1)
47-62: Static analysis false positive — innerHTML uses hardcoded strings.Same as in
configure-calculator.ts, the innerHTML assignments use static text literals, not user input. The XSS warning can be safely dismissed.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts (2)
80-139: Good interval cleanup pattern in search-calculator step.The
search-calculatorstep correctly stores the interval ID and cleans it up in thehidehandler (lines 130-136). This pattern should be applied consistently to theselect-calculatorstep's subscription.
18-45: Clean implementation of the open-block-menu step.The
advanceOnclick handler combined with highlighting creates a clear user flow. The cleanup inhideis properly implemented.
...latform/frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/block-menu.ts
Show resolved
Hide resolved
.../frontend/src/app/(platform)/build/components/FlowEditor/tutorial/steps/second-calculator.ts
Show resolved
Hide resolved
github-actions
bot
added
the
conflicts
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
github-actions
bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
github-project-automation
bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
Abhi1992002
deleted the
abhimanyuyadav/open-2840-add-tutorial-in-new-builder
branch
github-project-automation
bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
3 participants
Changes 🏗️
This PR adds a comprehensive interactive tutorial for the new Builder UI to help users learn how to create agents. Key changes include:
Screen.Recording.2026-01-13.at.12.17.11.PM.mov
Checklist 📋
For code changes: