mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-07 22:33:57 -05:00
290d0d9a9b
(#11658) ## Summary Implements an auto-save draft recovery system that persists unsaved flow builder state across browser sessions, tab closures, and refreshes. When users return to a flow with unsaved changes, they can choose to restore or discard the draft via an intuitive recovery popup. https://github.com/user-attachments/assets/0f77173b-7834-48d2-b7aa-73c6cd2eaff6 ## Changes 🏗️ ### Core Features - **Draft Recovery Popup** (`DraftRecoveryPopup.tsx`) - Displays amber-themed notification with unsaved changes metadata - Shows node count, edge count, and relative time since last save - Provides restore and discard actions with tooltips - Auto-dismisses on click outside or ESC key - **Auto-Save System** (`useDraftManager.ts`) - Automatically saves draft state every 15 seconds - Saves on browser tab close/refresh via `beforeunload` - Tracks nodes, edges, graph schemas, node counter, and flow version - Smart dirty checking - only saves when actual changes detected - Cleans up expired drafts (24-hour TTL) - **IndexedDB Persistence** (`db.ts`, `draft-service.ts`) - Uses Dexie library for reliable client-side storage - Handles both existing flows (by flowID) and new flows (via temp session IDs) - Compares draft state with current state to determine if recovery needed - Automatically clears drafts after successful save ### Integration Changes - **Flow Editor** (`Flow.tsx`) - Integrated `DraftRecoveryPopup` component - Passes `isInitialLoadComplete` state for proper timing - **useFlow Hook** (`useFlow.ts`) - Added `isInitialLoadComplete` state to track when flow is ready - Ensures draft check happens after initial graph load - Resets state on flow/version changes - **useCopyPaste Hook** (`useCopyPaste.ts`) - Refactored to manage keyboard event listeners internally - Simplified integration by removing external event handler setup - **useSaveGraph Hook** (`useSaveGraph.ts`) - Clears draft after successful save (both create and update) - Removes temp flow ID from session storage on first save ### Dependencies - Added `dexie@4.2.1` - Modern IndexedDB wrapper for reliable client-side storage ## Technical Details **Auto-Save Flow:** 1. User makes changes to nodes/edges 2. Change triggers 15-second debounced save 3. Draft saved to IndexedDB with timestamp 4. On save, current state compared with last saved state 5. Only saves if meaningful changes detected **Recovery Flow:** 1. User loads flow/refreshes page 2. After initial load completes, check for existing draft 3. Compare draft with current state 4. If different and non-empty, show recovery popup 5. User chooses to restore or discard 6. Draft cleared after either action **Session Management:** - Existing flows: Use actual flowID for draft key ### Test Plan 🧪 - [x] Create a new flow with 3+ blocks and connections, wait 15+ seconds, then refresh the page - verify recovery popup appears with correct counts and restoring works - [x] Create a flow with blocks, refresh, then click "Discard" button on recovery popup - verify popup disappears and draft is deleted - [x] Add blocks to a flow, save successfully - verify draft is cleared from IndexedDB (check DevTools > Application > IndexedDB) - [x] Make changes to an existing flow, refresh page - verify recovery popup shows and restoring preserves all changes correctly - [x] Verify empty flows (0 nodes) don't trigger recovery popup or save drafts
162 lines
5.4 KiB
JSON
162 lines
5.4 KiB
JSON
{
|
|
"name": "frontend",
|
|
"version": "0.3.4",
|
|
"private": true,
|
|
"engines": {
|
|
"node": "22.x"
|
|
},
|
|
"scripts": {
|
|
"dev": "pnpm run generate:api:force && next dev --turbo",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"start:standalone": "cd .next/standalone && node server.js",
|
|
"lint": "next lint && prettier --check .",
|
|
"format": "next lint --fix; prettier --write .",
|
|
"types": "tsc --noEmit",
|
|
"test": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test",
|
|
"test-ui": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test --ui",
|
|
"test:no-build": "playwright test",
|
|
"gentests": "playwright codegen http://localhost:3000",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build-storybook": "storybook build",
|
|
"test-storybook": "test-storybook",
|
|
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
|
|
"generate:api": "npx --yes tsx ./scripts/generate-api-queries.ts && orval --config ./orval.config.ts",
|
|
"generate:api:force": "npx --yes tsx ./scripts/generate-api-queries.ts --force && orval --config ./orval.config.ts"
|
|
},
|
|
"browserslist": [
|
|
"defaults"
|
|
],
|
|
"dependencies": {
|
|
"@faker-js/faker": "10.0.0",
|
|
"@hookform/resolvers": "5.2.2",
|
|
"@next/third-parties": "15.4.6",
|
|
"@phosphor-icons/react": "2.1.10",
|
|
"@radix-ui/react-alert-dialog": "1.1.15",
|
|
"@radix-ui/react-avatar": "1.1.10",
|
|
"@radix-ui/react-checkbox": "1.3.3",
|
|
"@radix-ui/react-collapsible": "1.1.12",
|
|
"@radix-ui/react-context-menu": "2.2.16",
|
|
"@radix-ui/react-dialog": "1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "2.1.16",
|
|
"@radix-ui/react-icons": "1.3.2",
|
|
"@radix-ui/react-label": "2.1.7",
|
|
"@radix-ui/react-popover": "1.1.15",
|
|
"@radix-ui/react-radio-group": "1.3.8",
|
|
"@radix-ui/react-scroll-area": "1.2.10",
|
|
"@radix-ui/react-select": "2.2.6",
|
|
"@radix-ui/react-separator": "1.1.7",
|
|
"@radix-ui/react-slot": "1.2.3",
|
|
"@radix-ui/react-switch": "1.2.6",
|
|
"@radix-ui/react-tabs": "1.1.13",
|
|
"@radix-ui/react-toast": "1.2.15",
|
|
"@radix-ui/react-tooltip": "1.2.8",
|
|
"@rjsf/core": "5.24.13",
|
|
"@rjsf/utils": "5.24.13",
|
|
"@rjsf/validator-ajv8": "5.24.13",
|
|
"@sentry/nextjs": "10.27.0",
|
|
"@supabase/ssr": "0.7.0",
|
|
"@supabase/supabase-js": "2.78.0",
|
|
"@tanstack/react-query": "5.90.6",
|
|
"@tanstack/react-table": "8.21.3",
|
|
"@types/jaro-winkler": "0.2.4",
|
|
"@vercel/analytics": "1.5.0",
|
|
"@vercel/speed-insights": "1.2.0",
|
|
"@xyflow/react": "12.9.2",
|
|
"boring-avatars": "1.11.2",
|
|
"class-variance-authority": "0.7.1",
|
|
"clsx": "2.1.1",
|
|
"cmdk": "1.1.1",
|
|
"cookie": "1.0.2",
|
|
"date-fns": "4.1.0",
|
|
"dexie": "4.2.1",
|
|
"dotenv": "17.2.3",
|
|
"elliptic": "6.6.1",
|
|
"embla-carousel-react": "8.6.0",
|
|
"flatbush": "4.5.0",
|
|
"framer-motion": "12.23.24",
|
|
"geist": "1.5.1",
|
|
"highlight.js": "11.11.1",
|
|
"jaro-winkler": "0.2.8",
|
|
"katex": "0.16.25",
|
|
"launchdarkly-react-client-sdk": "3.9.0",
|
|
"lodash": "4.17.21",
|
|
"lucide-react": "0.552.0",
|
|
"moment": "2.30.1",
|
|
"next": "15.4.10",
|
|
"next-themes": "0.4.6",
|
|
"nuqs": "2.7.2",
|
|
"party-js": "2.2.0",
|
|
"react": "18.3.1",
|
|
"react-currency-input-field": "4.0.3",
|
|
"react-day-picker": "9.11.1",
|
|
"react-dom": "18.3.1",
|
|
"react-drag-drop-files": "2.4.0",
|
|
"react-hook-form": "7.66.0",
|
|
"react-icons": "5.5.0",
|
|
"react-markdown": "9.0.3",
|
|
"react-modal": "3.16.3",
|
|
"react-shepherd": "6.1.9",
|
|
"react-window": "1.8.11",
|
|
"recharts": "3.3.0",
|
|
"rehype-autolink-headings": "7.1.0",
|
|
"rehype-highlight": "7.0.2",
|
|
"rehype-katex": "7.0.1",
|
|
"rehype-slug": "6.0.0",
|
|
"remark-gfm": "4.0.1",
|
|
"remark-math": "6.0.0",
|
|
"shepherd.js": "14.5.1",
|
|
"sonner": "2.0.7",
|
|
"tailwind-merge": "2.6.0",
|
|
"tailwind-scrollbar": "3.1.0",
|
|
"tailwindcss-animate": "1.0.7",
|
|
"uuid": "11.1.0",
|
|
"vaul": "1.1.2",
|
|
"zod": "3.25.76",
|
|
"zustand": "5.0.8"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "4.1.2",
|
|
"@playwright/test": "1.56.1",
|
|
"@storybook/addon-a11y": "9.1.5",
|
|
"@storybook/addon-docs": "9.1.5",
|
|
"@storybook/addon-links": "9.1.5",
|
|
"@storybook/addon-onboarding": "9.1.5",
|
|
"@storybook/nextjs": "9.1.5",
|
|
"@tanstack/eslint-plugin-query": "5.91.2",
|
|
"@tanstack/react-query-devtools": "5.90.2",
|
|
"@types/canvas-confetti": "1.9.0",
|
|
"@types/lodash": "4.17.20",
|
|
"@types/negotiator": "0.6.4",
|
|
"@types/node": "24.10.0",
|
|
"@types/react": "18.3.17",
|
|
"@types/react-dom": "18.3.5",
|
|
"@types/react-modal": "3.16.3",
|
|
"@types/react-window": "1.8.8",
|
|
"axe-playwright": "2.2.2",
|
|
"chromatic": "13.3.3",
|
|
"concurrently": "9.2.1",
|
|
"cross-env": "10.1.0",
|
|
"eslint": "8.57.1",
|
|
"eslint-config-next": "15.5.7",
|
|
"eslint-plugin-storybook": "9.1.5",
|
|
"msw": "2.11.6",
|
|
"msw-storybook-addon": "2.0.6",
|
|
"orval": "7.13.0",
|
|
"pbkdf2": "3.1.5",
|
|
"postcss": "8.5.6",
|
|
"prettier": "3.6.2",
|
|
"prettier-plugin-tailwindcss": "0.7.1",
|
|
"require-in-the-middle": "7.5.2",
|
|
"storybook": "9.1.5",
|
|
"tailwindcss": "3.4.17",
|
|
"typescript": "5.9.3"
|
|
},
|
|
"msw": {
|
|
"workerDirectory": [
|
|
"public"
|
|
]
|
|
},
|
|
"packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
|
|
}
|