feat(memories): make Auto-capture state explicit with badge + toast#13134
Closed
keval718 wants to merge 2 commits into
Closed
feat(memories): make Auto-capture state explicit with badge + toast#13134keval718 wants to merge 2 commits into
keval718 wants to merge 2 commits into
Conversation
The only feedback after toggling Auto-capture was a small colored dot in
the sidebar. New users routinely missed the change, both because the dot
is easy to overlook and because it sits well away from the button being
clicked.
Add two complementary signals, matching patterns already used elsewhere
in Langflow:
1. Persistent state badge on the button (the part the user is looking
at). ON renders as an emerald pill, OFF as a slate pill — same
shape, type, and color tokens as the status badges in
IngestionRunsSection / IngestionHistoryPanel, so KB users will
recognize it. The toggle icon swaps ToggleRight/Left and tints
emerald when ON for a second glanceable cue. aria-pressed and a
state-aware aria-label keep screen readers in the loop.
2. Brief toast on commit. ``useAutoCaptureDebouncedToggle`` gains
``onToggleSuccess``/``onToggleError`` callbacks that fire only
when the debounced mutation actually resolves (so rapid on→off→on
within the debounce window stays silent). ``useMemoriesData``
wires the success callback to ``setSuccessData`` with
"Auto-capture enabled" / "Auto-capture disabled". The mutation's
existing onError already pushes an error toast, so the new path
stays silent on failure to avoid double-notification.
Button outline variant is kept in both states; the pill carries the
status color so the control's footprint stays stable across toggles.
Tests cover both directions: state badge present + aria reflects state
in MemoryDetailsHeader; toast fires with the right copy from
useMemoriesData when the resolved mutation is on or off.
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
Codecov Report✅ All modified and coverable lines are covered by tests. ❌ Your project check has failed because the head coverage (49.30%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## release-1.10.0 #13134 +/- ##
==================================================
+ Coverage 54.83% 54.89% +0.05%
==================================================
Files 2146 2147 +1
Lines 200251 200352 +101
Branches 30214 28587 -1627
==================================================
+ Hits 109805 109977 +172
+ Misses 89265 89192 -73
- Partials 1181 1183 +2
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
…ndards
Follow-up cleanup on top of the badge + toast change. Addresses the
B-grade items I called out in self-review:
- Extract MemoryAutoCaptureToggle component. MemoryDetailsHeader was
inlining a 20-line Tailwind blob; pull it into a small presentational
component with prop-level JSDoc and a single accessible button.
Header now reads as orchestration only.
- Replace the hand-rolled status pill with the existing Badge primitive
(variant=successStatic / secondaryStatic, size=sm). One source of
truth for badge tokens across the app — no more drifting Tailwind
blobs.
- Route all user-visible Auto-capture copy through i18n
(memories.autoCapture.{label,stateOn,stateOff,ariaEnable,ariaDisable,
toastEnabled,toastDisabled} in en.json). No more hardcoded English
in TS.
- Export NextIsActive from useAutoCaptureDebouncedToggle so the
toggle component can type its onToggle prop precisely.
- Add focused unit tests for useAutoCaptureDebouncedToggle in
isolation (debounce, on→off→on collapse, success/error callbacks,
memory-id cleanup, no-memory no-op). Previously only covered through
useMemoriesData integration tests.
- Update MemoryDetailsHeader.test.tsx to assert against the new
state-aware aria-labels and the badge testid.
74/74 memories suite green, 841/841 across FlowPage + createMemoryModal.
github-actions
Bot
added
enhancement
Collaborator
|
Hey @keval718 and @dkaushik94 I am not sure who assigned you this ticket, but I have a similar change |
viktoravelino
approved these changes
May 19, 2026
Collaborator
Author
|
closing this PR as @olayinkaadelakun has already fixed it in #13116 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Make the Auto-capture toggle on the Memory Base details header self-explanatory. Before this PR the only feedback after a toggle was a small green/gray dot in the sidebar — easy to miss, especially for first-time users, and not anywhere near the button they just clicked.
Two complementary signals are now wired up, both built on patterns already in Langflow:
ONrenders as an emerald pill,OFFas a slate pill, using the same rounded / uppercase /text-[10px]token shape as the status badges inIngestionRunsSectionandIngestionHistoryPanel. The toggle icon swapsToggleRight↔ToggleLeftand tints emerald when ON for a second glanceable cue.aria-pressedreflects state;aria-labelswitches between "Enable auto-capture" and "Disable auto-capture" so screen readers announce the action.useAutoCaptureDebouncedTogglegains optionalonToggleSuccess(nextIsActive)andonToggleError(nextIsActive)callbacks that fire only when the debounced mutation actually resolves (rapid on → off → on within the debounce window stays silent).useMemoriesDatawires the success callback tosetSuccessData({ title: "Auto-capture enabled" | "Auto-capture disabled" }). The existingupdateMemoryMutation.onErroralready pushes an error toast, so the new path stays quiet on failure to avoid double-notification.The button keeps the outline variant in both states; the pill carries the status color so the control's footprint stays stable across toggles. No layout jitter on click.
Files
MemoryDetailsHeader.tsx— outline button with state-aware aria,ToggleRight/Lefticon w/ emerald-tint when ON, emerald/slate status pill rendered viadata-testid="memory-auto-capture-state".useAutoCaptureDebouncedToggle.ts— new optionalonToggleSuccess/onToggleErrorcallbacks invoked from the mutation'sonSuccess/onError.useMemoriesData.ts— wires the success callback tosetSuccessDatawith the appropriate copy.Tests
MemoryDetailsHeader.test.tsx— split into ON / OFF cases; asserts pill text,aria-pressed, and the state-awarearia-label.useMemoriesData.test.tsx— two new cases (toggle on, toggle off) drive the debounced mutation, invoke the capturedonSuccess, and assert the right toast copy is pushed viasetSuccessData.MemoriesMainContentjest suite: 68 / 68 ✅make format_frontendclean.Test plan
ToggleLefticon.ToggleRighttinted emerald. After debounce, a "Auto-capture enabled" success toast appears.Screen shots
Before
After
