Skip to content

[AI-BUILDER-22] refactor: auto-generate steps#1453

Merged
kevinkim-ogp merged 5 commits intotrunk/aifrom
ai-builder/auto-generate-steps
Mar 19, 2026
Merged

[AI-BUILDER-22] refactor: auto-generate steps#1453
kevinkim-ogp merged 5 commits intotrunk/aifrom
ai-builder/auto-generate-steps

Conversation

@kevinkim-ogp
Copy link
Copy Markdown
Contributor

@kevinkim-ogp kevinkim-ogp commented Mar 6, 2026

Auto-open workflow preview and improve chat scrolling behavior

Changes

  • Auto-open preview: Workflow preview now automatically opens when AI response completes, eliminating the need for manual "Preview steps" button
  • Clear output on new input: Reset previous workflow output when submitting new chat messages to ensure fresh step generation
  • Enhanced scroll behavior: Improved auto-scrolling logic with better handling of user messages, streaming responses, and scroll position detection
  • Removed manual preview trigger: Eliminated the "Preview steps" button and drawer close functionality since preview now opens automatically
  • Optimized initial scroll: Added proper scroll-to-bottom behavior on component mount using requestAnimationFrame for better performance

Tests

New chat

  • When the chat messages display the steps of the workflow, the side drawer should automatically open and display the steps in the 'Pipe builder' layout
  • Entering a new messages that creates a new step triggers a generation of a new preview

Refresh chat window

  • Steps preview opens if there was a preview before refresh
  • Steps preview does not open if there was no preview before refresh
  • Auto-scrolls to the bottom of messages

Cleanup

  • No longer see the 'Preview steps' button

Copy link
Copy Markdown
Contributor Author

kevinkim-ogp commented Mar 6, 2026

This stack of pull requests is managed by Graphite. Learn more about stacking.

@kevinkim-ogp kevinkim-ogp force-pushed the ai-builder/combine-chat-and-readiness branch from c355b2b to f44f443 Compare March 6, 2026 08:04
@kevinkim-ogp kevinkim-ogp force-pushed the ai-builder/auto-generate-steps branch from 517dddd to d262e9a Compare March 6, 2026 08:04
@kevinkim-ogp kevinkim-ogp changed the title refactor: auto-generate steps [AI-BUILDER-22] refactor: auto-generate steps Mar 9, 2026
@kevinkim-ogp kevinkim-ogp marked this pull request as ready for review March 9, 2026 01:41
@kevinkim-ogp kevinkim-ogp requested a review from a team as a code owner March 9, 2026 01:41
Copy link
Copy Markdown
Contributor

@pregnantboy pregnantboy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently there's an issue where the client still tries to call generateSteps when readiness check return false. not sure if it's in this PR or earlier PRs.

const wasStreamingRef = useRef(isStreaming)
const scrollTickRef = useRef(false)

// Unified scroll function
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using https://www.npmjs.com/package/use-stick-to-bottom to implement auto scroll to bottom

Copy link
Copy Markdown
Contributor Author

to fix: scrolling

@kevinkim-ogp kevinkim-ogp changed the base branch from ai-builder/combine-chat-and-readiness to graphite-base/1453 March 10, 2026 09:26
@kevinkim-ogp kevinkim-ogp force-pushed the ai-builder/auto-generate-steps branch from d262e9a to 106e3ea Compare March 10, 2026 09:28
@graphite-app graphite-app Bot changed the base branch from graphite-base/1453 to trunk/ai March 10, 2026 09:29
@kevinkim-ogp kevinkim-ogp force-pushed the ai-builder/auto-generate-steps branch from 106e3ea to d81a037 Compare March 10, 2026 09:29
Copy link
Copy Markdown
Contributor Author

kevinkim-ogp commented Mar 11, 2026

What changed?

  • fixed linting and type errors from rebase
  • removed unused form input schema; updated generate steps input schema to accept up to 10,000 characters
  • used use-stick-to-bottom to handle scroll behaviour instead of hand rolling
    • known issue that will be addressed in later PR: entering new input focuses on button in the chat window instead of scrolling

Tests

  • Scroll button appears when not at the bottom
  • Scrolling is smooth while the response is streaming
  • Steps are not re-generated when the last assistant message does not contain steps

Copy link
Copy Markdown
Contributor

@pregnantboy pregnantboy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. just a quick question on when to use locationRef vs location


navigate(`${URLS.EDITOR}/ai`, {
state: {
...location.state,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure when to use location.state vs locationRef.current.state

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its updated in a later PR to use locationRef.current.state so it always references the latest value. onFinish is captured by useChat at initialisation and never recreated, so location.state inside it is a stale snapshot from when the stream started. Since StepsPreview can call navigate (writing output into location.state) before onFinish fires, using the ref ensures we don't clobber that update

Copy link
Copy Markdown
Contributor Author

kevinkim-ogp commented Mar 19, 2026

Merge activity

  • Mar 19, 9:21 AM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Mar 19, 9:21 AM UTC: @kevinkim-ogp merged this pull request with Graphite.

@kevinkim-ogp kevinkim-ogp merged commit 4a9166c into trunk/ai Mar 19, 2026
8 checks passed
@kevinkim-ogp kevinkim-ogp deleted the ai-builder/auto-generate-steps branch March 19, 2026 09:21
kevinkim-ogp added a commit that referenced this pull request Mar 26, 2026
## Auto-open workflow preview and improve chat scrolling behavior

### Changes

- **Auto-open preview**: Workflow preview now automatically opens when AI response completes, eliminating the need for manual "Preview steps" button
- **Clear output on new input**: Reset previous workflow output when submitting new chat messages to ensure fresh step generation
- **Enhanced scroll behavior**: Improved auto-scrolling logic with better handling of user messages, streaming responses, and scroll position detection
- **Removed manual preview trigger**: Eliminated the "Preview steps" button and drawer close functionality since preview now opens automatically
- **Optimized initial scroll**: Added proper scroll-to-bottom behavior on component mount using requestAnimationFrame for better performance

### Tests

New chat

- [ ] When the chat messages display the steps of the workflow, the side drawer should automatically open and display the steps in the 'Pipe builder' layout
- [ ] Entering a new messages that creates a new step triggers a generation of a new preview

Refresh chat window

- [ ] Steps preview opens if there was a preview before refresh
- [ ] Steps preview does not open if there was no preview before refresh
- [ ] Auto-scrolls to the bottom of messages

Cleanup

- [ ] No longer see the 'Preview steps' button
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants