feat(frontend): copilot composer + menu with Skills/Scheduled/Integrations modals and guided creation flows - #13489
Conversation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…skills surface Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… flow and type badges Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ia ?modal= param Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR adds Copilot modal state and dialog rendering, replaces the chat attachment menu with a plus menu that opens modals, extracts skills/schedules/integrations panels, and routes library pages to Copilot guided prompts. It also updates related tests, empty-state copy, and badge labels. ChangesCopilot modals and contextual panels
Estimated code review effort: 4 (Complex) | ~75 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ComposerPlusMenu
participant useCopilotModal
participant CopilotModals
participant SkillsPanel
participant useCopilotUIStore
User->>ComposerPlusMenu: choose Skills / Scheduled / Integrations
ComposerPlusMenu->>useCopilotModal: openModal(...)
useCopilotModal-->>CopilotModals: modal query state changes
CopilotModals->>SkillsPanel: render dialog content
User->>SkillsPanel: click guided prompt action
SkillsPanel->>CopilotModals: onGuidedPrompt(prompt)
CopilotModals->>useCopilotModal: closeModal()
CopilotModals->>useCopilotUIStore: setInitialPrompt(prompt)
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🔴 Merge Conflicts DetectedThe following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.
🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 4 conflict(s), 0 medium risk, 1 low risk (out of 5 PRs with file overlap) Auto-generated on push. Ignores: |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## dev #13489 +/- ##
==========================================
- Coverage 75.72% 75.05% -0.68%
==========================================
Files 2644 2623 -21
Lines 201326 194905 -6421
Branches 19459 19196 -263
==========================================
- Hits 152458 146279 -6179
+ Misses 44566 44465 -101
+ Partials 4302 4161 -141
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
!deploy |
|
🚀 Deploying PR #13489 to development environment... |
|
✅ Preview environment is live (all services healthy)
Push more commits, then comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
autogpt_platform/frontend/src/components/contextual/SchedulesPanel/useSchedulesPanel.ts (1)
49-57: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winPartial fetch failure hides all successfully-loaded schedules.
erroris set tocopilotQuery.error ?? graphQuery.error, so if only one of the two independent queries fails,SchedulesPanelrenders a full-pageErrorCardand discards the other query's successfully-fetchedschedulesentirely (seeSchedulesPanel.tsxLine 47:{error ? <ErrorCard .../> : ...}). A transient failure in the graph-schedules endpoint, for example, would hide all copilot follow-ups that loaded fine.Consider surfacing a partial-error indicator (e.g., inline banner) while still rendering whichever list succeeded, rather than an all-or-nothing error state.
Proposed fix: don't let one failed query hide the other's data
return { followups: copilotQuery.data ?? [], schedules, isLoading: copilotQuery.isLoading || graphQuery.isLoading, - error: copilotQuery.error ?? graphQuery.error, + // Only treat as a hard error when neither source has data to show. + error: schedules.length === 0 + ? copilotQuery.error ?? graphQuery.error + : null, + partialError: copilotQuery.error ?? graphQuery.error, };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/contextual/SchedulesPanel/useSchedulesPanel.ts` around lines 49 - 57, The combined error state in useSchedulesPanel is too coarse: error currently returns copilotQuery.error ?? graphQuery.error, which makes SchedulesPanel switch to the full ErrorCard even when the other query succeeded. Update useSchedulesPanel (and the SchedulesPanel error handling it feeds) so a single query failure does not suppress successfully loaded data; keep rendering schedules/followups from the successful query and expose partial-failure state separately, such as a non-blocking inline warning. Use the existing symbols copilotQuery, graphQuery, schedules, followups, and error to route partial results without turning the whole panel into an all-or-nothing error state.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/useChatInput.ts (1)
30-38: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider a regression test for the new focus-on-consume behavior.
This focus-after-prefill logic is core to the guided-prompt UX this PR adds (modal → prefilled composer → user can type immediately). A test asserting the textarea receives focus after
initialPromptis consumed would guard this critical path against regressions.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(platform)/copilot/components/ChatInput/useChatInput.ts around lines 30 - 38, Add a regression test for the focus-on-consume behavior in useChatInput. Verify that when initialPrompt is consumed, the textarea identified by inputId is focused so the guided-flow prefilled composer becomes immediately editable. Cover the logic around the effect/callback that calls document.getElementById and textarea.focus() to protect this modal-to-composer UX path from regressions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/__tests__/CopilotPage.test.tsx:
- Around line 92-96: The shared nuqs mock in CopilotPage.test.tsx is not
key-aware, so useQueryState("sessionId", ...) and useQueryState("modal", ...)
both receive the same value and can interfere with each other. Update the
vi.mock("nuqs") implementation so useQueryState inspects the requested query key
and returns separate mocked state for sessionId versus modal, keeping
CopilotPage and CopilotModals tests isolated. Use the existing
mockSessionIdForQueryState setup as the sessionId-backed state and add a
dedicated modal mock value for the modal path.
In `@autogpt_platform/frontend/src/components/contextual/guidedPrompts.ts`:
- Around line 1-3: The user-facing NEW_SKILL_PROMPT text contains a grammar typo
by using “it’s” instead of the possessive “its” in the guided prompt copy.
Update the string in guidedPrompts.ts for NEW_SKILL_PROMPT so the phrase reads
naturally and correctly, keeping the rest of the prompt unchanged.
---
Outside diff comments:
In
`@autogpt_platform/frontend/src/components/contextual/SchedulesPanel/useSchedulesPanel.ts`:
- Around line 49-57: The combined error state in useSchedulesPanel is too
coarse: error currently returns copilotQuery.error ?? graphQuery.error, which
makes SchedulesPanel switch to the full ErrorCard even when the other query
succeeded. Update useSchedulesPanel (and the SchedulesPanel error handling it
feeds) so a single query failure does not suppress successfully loaded data;
keep rendering schedules/followups from the successful query and expose
partial-failure state separately, such as a non-blocking inline warning. Use the
existing symbols copilotQuery, graphQuery, schedules, followups, and error to
route partial results without turning the whole panel into an all-or-nothing
error state.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/components/ChatInput/useChatInput.ts:
- Around line 30-38: Add a regression test for the focus-on-consume behavior in
useChatInput. Verify that when initialPrompt is consumed, the textarea
identified by inputId is focused so the guided-flow prefilled composer becomes
immediately editable. Cover the logic around the effect/callback that calls
document.getElementById and textarea.focus() to protect this modal-to-composer
UX path from regressions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 612b0667-e2f1-4e05-852d-07b891f33a5a
📒 Files selected for processing (79)
autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/copilot/__tests__/CopilotPage.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/__tests__/ChatInput.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AttachmentMenu.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/AttachmentMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/useChatInput.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotModals/CopilotModals.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotModals/__tests__/CopilotModals.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/useCopilotModal.tsautogpt_platform/frontend/src/app/(platform)/library/followups/__tests__/main.test.tsxautogpt_platform/frontend/src/app/(platform)/library/followups/page.tsxautogpt_platform/frontend/src/app/(platform)/library/skills/__tests__/main.test.tsxautogpt_platform/frontend/src/app/(platform)/library/skills/components/UploadSkillButton/UploadSkillButton.tsxautogpt_platform/frontend/src/app/(platform)/library/skills/page.tsxautogpt_platform/frontend/src/app/(platform)/settings/integrations/page.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/IntegrationsPanel.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/__tests__/helpers.test.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/ConnectServiceDialog.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/__tests__/helpers.test.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/ApiKeyConnectForm.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/DetailView.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/McpConnectPanel.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/MethodPanel.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/OAuthConnectButton.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/ProviderAvatar.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/UnsupportedNotice.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/__tests__/McpConnectPanel.test.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/__tests__/helpers.test.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/__tests__/useOAuthConnect.test.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/helpers.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/schema.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/useApiKeyConnectForm.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/DetailView/useOAuthConnect.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/ListView.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/components/ProviderRow.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/helpers.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/useConnectServiceDialog.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ConnectServiceDialog/useMeasuredHeight.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/DeleteConfirmDialog/DeleteConfirmDialog.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/DeleteConfirmDialog/__tests__/DeleteConfirmDialog.test.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsHeader/IntegrationsHeader.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsHeader/__tests__/IntegrationsHeader.test.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/IntegrationsList.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/IntegrationsListSkeleton.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/__tests__/IntegrationsListSkeleton.test.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/__tests__/useIntegrationsSelection.test.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/useIntegrationsList.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsList/useIntegrationsSelection.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsListEmpty/IntegrationsListEmpty.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsListEmpty/__tests__/IntegrationsListEmpty.test.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsSearch/IntegrationsSearch.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/IntegrationsSelectionBar/IntegrationsSelectionBar.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/ProviderGroup/ProviderGroup.tsxautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/components/hooks/useDeleteIntegration.tsautogpt_platform/frontend/src/components/contextual/IntegrationsPanel/helpers.tsautogpt_platform/frontend/src/components/contextual/SchedulesPanel/SchedulesPanel.tsxautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/EmptyFollowups/EmptyFollowups.tsxautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/FollowupListItem/FollowupListItem.tsxautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/FollowupListItem/helpers.test.tsautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/FollowupListItem/helpers.tsautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/FollowupListItem/useFollowupListItem.tsautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/GraphScheduleListItem/GraphScheduleListItem.tsxautogpt_platform/frontend/src/components/contextual/SchedulesPanel/components/GraphScheduleListItem/useGraphScheduleListItem.tsautogpt_platform/frontend/src/components/contextual/SchedulesPanel/useSchedulesPanel.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/SkillsPanel.tsxautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/EmptySkills/EmptySkills.tsxautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/SkillListItem/SkillListItem.tsxautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/SkillListItem/helpers.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/SkillListItem/useSkillListItem.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/UploadSkillButton/UploadSkillButton.tsxautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/UploadSkillButton/__tests__/getSkillUploadError.test.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/UploadSkillButton/helpers.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/components/UploadSkillButton/useUploadSkillButton.tsautogpt_platform/frontend/src/components/contextual/SkillsPanel/useSkillsPanel.tsautogpt_platform/frontend/src/components/contextual/guidedPrompts.ts
💤 Files with no reviewable changes (3)
- autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/tests/AttachmentMenu.test.tsx
- autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/AttachmentMenu.tsx
- autogpt_platform/frontend/src/app/(platform)/library/skills/components/UploadSkillButton/UploadSkillButton.tsx
- Add parseAsStringLiteral to low-credit-banner nuqs mock (CI failure) - Make CopilotPage.test nuqs mock key-aware so sessionId/modal don't conflate - Fix "it's" -> "its" typo in NEW_SKILL_PROMPT user-facing copy - Don't hide loaded schedules when only one source fails: hard error only when nothing loaded, non-blocking warning banner on partial failure - Add regression tests for partial/full schedule fetch failure and for focus-on-consume of guided prompts in ChatInput Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
🤖 Addressed the outside-diff-range findings from @coderabbitai's review in 45bab6f8f:
|
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
cd autogpt_platform/frontend 2>/dev/null || true
git show 45bab6f8fc308a7a0de288adacbdafda66a3922d --stat 2>/dev/null | head -50
echo "---schedules panel---"
git show 45bab6f8fc308a7a0de288adacbdafda66a3922d -- '*useSchedulesPanel.ts' 2>/dev/null
echo "---chat input test---"
git show 45bab6f8fc308a7a0de288adacbdafda66a3922d -- '*useChatInput*test*' 2>/dev/nullLength of output: 3893
|
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
…still loading Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The menu structure is no longer gated by chat-workspace-files: the popover always lists flat options and 'Use File from Workspace' simply appears when its flag is on. ComposerPlusMenu now reads the flag itself instead of taking a showWorkspaceOption prop. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx (2)
89-100: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDuplication across fixed menu items could be config-driven.
The three
openModal(...)menu items follow an identical shape (icon + label + onSelect). Extracting a small array of{ icon, label, modal }entries and mapping over it would reduce duplication if more actions are added later.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx around lines 89 - 100, The fixed menu items in ComposerPlusMenu are duplicated and should be driven by configuration instead of hardcoded repeated DropdownMenuItem blocks. Refactor the Integrations, Skills, and Scheduled entries into a small array of objects containing the icon, label, and modal key, then map over that array inside the menu render so openModal stays the single action handler and adding new items later is simpler.
29-105: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider extracting handlers into a
useComposerPlusMenuhook.The component mixes render JSX with business logic (
openFilePicker,handleFileChange) and spans ~77 lines, exceeding the recommended ~50-line guideline for render functions/hooks.As per coding guidelines: "Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components" and "Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx around lines 29 - 105, The ComposerPlusMenu component is too large and mixes rendering with file-picker logic, so extract the non-UI behavior into a dedicated useComposerPlusMenu hook or helper. Move openFilePicker and handleFileChange out of ComposerPlusMenu, keep the component focused on JSX, and wire the hook outputs back into the existing DropdownMenuTrigger, file input, and DropdownMenuItem handlers. Preserve the current behavior for onFilesSelected, onUseWorkspaceFile, useCopilotModal, and useGetFlag while reducing the render function size.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx:
- Around line 89-100: The fixed menu items in ComposerPlusMenu are duplicated
and should be driven by configuration instead of hardcoded repeated
DropdownMenuItem blocks. Refactor the Integrations, Skills, and Scheduled
entries into a small array of objects containing the icon, label, and modal key,
then map over that array inside the menu render so openModal stays the single
action handler and adding new items later is simpler.
- Around line 29-105: The ComposerPlusMenu component is too large and mixes
rendering with file-picker logic, so extract the non-UI behavior into a
dedicated useComposerPlusMenu hook or helper. Move openFilePicker and
handleFileChange out of ComposerPlusMenu, keep the component focused on JSX, and
wire the hook outputs back into the existing DropdownMenuTrigger, file input,
and DropdownMenuItem handlers. Preserve the current behavior for
onFilesSelected, onUseWorkspaceFile, useCopilotModal, and useGetFlag while
reducing the render function size.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cefb2ac6-54da-4678-bb97-bdebb3f06f77
📒 Files selected for processing (3)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
💤 Files with no reviewable changes (1)
- autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (8)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: lint
- GitHub Check: end-to-end tests
- GitHub Check: Seer Code Review
- GitHub Check: Analyze (typescript)
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (14)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend developmentFormat frontend code using
pnpm format
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development
autogpt_platform/frontend/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components/handlers
Noanytypes unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Always import the-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports are deprecated
Do not useuseCallbackoruseMemounless asked to optimize a given function
Never usesrc/components/__legacy__/*— use design system components fromsrc/components/
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}: Use Vitest + RTL + MSW for integration tests as the primary testing approach (~90%, page-level), use Playwright for E2E critical flows, and use Storybook for design system components
Run frontend integration tests withpnpm test:unit(Vitest + RTL + MSW)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
autogpt_platform/frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
autogpt_platform/frontend/**/*.{tsx,jsx}: Nodark:Tailwind classes — the design system handles dark mode
Use Next.js<Link>for internal navigation — never raw<a>tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in local
components/folder; component props should betype Props = { ... }(not exported) unless used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
autogpt_platform/frontend/src/app/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Write integration tests in
__tests__/next topage.tsxusing Vitest + RTL + MSW for new pages/features
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
autogpt_platform/frontend/src/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Orval-generated MSW handlers from
@/app/api/__generated__/endpoints/{tag}/{tag}.msw.tsfor API mocking
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
🧠 Learnings (12)
📚 Learning: 2026-02-27T10:45:49.499Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:49.499Z
Learning: Prefer using generated OpenAPI types from '`@/app/api/__generated__/`' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-03-24T02:23:31.305Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:0-0
Timestamp: 2026-03-24T02:23:31.305Z
Learning: In the Copilot platform UI code, follow the established Orval hook `onError` error-handling convention: first explicitly detect/handle `ApiError`, then read `error.response?.detail` (if present) as the primary message; if not available, fall back to `error.message`; and finally fall back to a generic string message. This convention should be used for generated Orval hooks even if the custom Orval mutator already maps details into `ApiError.message`, to keep consistency across hooks/components (e.g., `useCronSchedulerDialog.ts`, `useRunGraph.ts`, and rate-limit/reset flows).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-03-31T14:04:42.444Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12623
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx:172-177
Timestamp: 2026-03-31T14:04:42.444Z
Learning: In the Copilot frontend components under autogpt_platform/frontend/src/app/(platform)/copilot/, Tailwind dark mode variants (e.g., `dark:*`) are intentional and should be allowed. Do not flag `dark:` utilities in these Copilot UI components as incorrect; they are used to ensure proper contrast and correct behavior in both light and dark themes.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-07-03T04:19:11.799Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13474
File: autogpt_platform/frontend/src/app/(platform)/PlatformChrome/PlatformChrome.tsx:38-38
Timestamp: 2026-07-03T04:19:11.799Z
Learning: When reviewing Tailwind usage in .tsx components, allow intentional raw hex color values if they exactly match the design-spec and there is no equivalent Tailwind design token/utility class available (e.g., a utility like `bg-zinc-50` may be a different shade than the required `#f9f9f9`). Do not flag these as "design-token violations" as long as the reviewer can confirm that an appropriate Tailwind token does not exist or would not match the exact color.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx
📚 Learning: 2026-04-20T13:17:39.951Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12854
File: autogpt_platform/frontend/src/app/(platform)/library/__tests__/briefing.test.tsx:84-84
Timestamp: 2026-04-20T13:17:39.951Z
Learning: In the AutoGPT frontend, `testing-library/react` cleanup is already handled globally after each test via `src/tests/integrations/vitest.setup.tsx`. Therefore, for integration test files under `__tests__/`, do NOT add redundant `afterEach(() => cleanup())`. Only add local `afterEach` teardown for resources that are not covered globally—specifically, when using fake timers, add `afterEach(() => vi.useRealTimers())` (or equivalent) to restore real timers and prevent cross-test interference.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
📚 Learning: 2026-04-20T20:07:22.981Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/__tests__/ExecutionsTable.test.tsx:27-76
Timestamp: 2026-04-20T20:07:22.981Z
Learning: In this codebase, Orval-generated API modules under `src/app/api/__generated__/` are not committed to git and must be generated via `pnpm generate:api` (requires a running backend). In integration tests, it’s acceptable—and expected—to stub generated hooks/modules by mocking them with `vi.mock("`@/app/api/__generated__/endpoints/`{tag}/{tag}")`. Do not treat `vi.mock` of these generated hook modules as a violation of the MSW handler guideline, since the corresponding MSW handlers cannot be imported at test time when generated files are absent.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx
🔇 Additional comments (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/ComposerPlusMenu.tsx (1)
1-27: LGTM!Also applies to: 36-36, 38-88, 101-105
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/components/__tests__/ComposerPlusMenu.test.tsx (1)
1-111: LGTM!
…lError on loading Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…nt-Gravitas/AutoGPT into feat/copilot-plus-menu
|
🤖 Re @coderabbitai nitpicks on
|
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
cd autogpt_platform/frontend 2>/dev/null || true
git show 29c677839a9e570cbaed07254fe1cedbe25b23d4 --stat 2>/dev/null | head -50
echo "---hook---"
git show 29c677839a9e570cbaed07254fe1cedbe25b23d4 -- '*useComposerPlusMenu*' 2>/dev/null
echo "---component---"
git show 29c677839a9e570cbaed07254fe1cedbe25b23d4 -- '*ComposerPlusMenu.tsx' 2>/dev/nullLength of output: 4881
Agreed on skipping the config-driven items refactor — with only three fixed menu entries, a mapped array wouldn't meaningfully reduce duplication and would add a layer of indirection for readers. The flat JSX is fine here; worth revisiting only if the menu grows beyond a handful of items. |
|
!deploy |
|
🚀 Deploying PR #13489 to development environment... |
- Guided prompts now always replace the composer draft (picking New scheduled task after New skill swaps the text instead of keeping the stale prompt) - Attach file / Use File from Workspace / Integrations clear an untouched guided prompt; user-edited drafts are never cleared - "+" button tooltip is now "Add files and more" - User-facing "copilot" copy in the Scheduled/Skills panels switched to "AutoPilot" Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…nu mock in ChatInput tests ChatInput tests mock ComposerPlusMenu entirely, so the real dropdown never renders there. The mock now exposes onClearGuidedPrompt; which menu items trigger it is covered by ComposerPlusMenu.test.tsx. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
!deploy |
|
🚀 Deploying PR #13489 to development environment... |
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
|
🧹 Auto-undeploying: PR closed with active deployment. Cleaning up development environment for PR #13489. |
|
🧹 Preview Environment Cleaned Up All resources for PR #13489 have been removed:
Cleanup completed successfully. |
3 participants
Why / What / How
Why: Attaching context and reaching the surfaces that configure AutoPilot (connected services, learned skills, recurring tasks) are scattered across the app. The composer needs one obvious entry point for adding context, and creating a skill or a scheduled task needs one consistent pattern: "describe it to AutoPilot and it sets it up."
What: Adds a single + menu to the AutoPilot composer with four fixed actions — Attach file, Integrations, Skills, Scheduled. The last three open modals over
/copilotso the user never loses their chat context (a deliberate deviation from the PRD's V1 routing — this pulls the PRD's V2 "keep users on AutoPilot, like Claude" forward; agreed in product discussion). New skill and New scheduled task are guided flows that pre-fill the composer with a purpose-written prompt (verbatim from the PRD), focused and ready to send.How:
/library/skills,/library/followups, and/settings/integrationsare extracted into shared panels undersrc/components/contextual/(SkillsPanel,SchedulesPanel,IntegrationsPanel). The pages stay at their routes as thin wrappers; the copilot modals render the same panels — one implementation, two surfaces.?modal=skills|scheduled|integrationsquery param on/copilot(nuqs), so modals are deep-linkable and browser-back closes them.initialPromptprefill channel: from a modal we set the store directly; from a page we navigate with the existing/copilot#prompt=<encoded>hash pattern.consumeInitialPromptnow also focuses the textarea so the draft is immediately editable (send enables via existing logic).AttachmentMenubecameComposerPlusMenu; the popover is a flat list and is not structurally gated by flags — withCHAT_WORKSPACE_FILESon, a "Use File from Workspace" option simply appears after "Attach file".Changes 🏗️
ComposerPlusMenu(replacesAttachmentMenu): fixed four-item menu; Integrations/Skills/Scheduled open copilot modalsCopilotModals+useCopilotModal: three dialogs over/copilotdriven by?modal=SkillsPanel(extracted): adds New skill primary button (tooltip: "Teach AutoPilot a new skill in chat"), Upload skill becomes secondary (tooltip: "Import a skill file you've exported"), spec empty-state copy, "New" badge on a just-uploaded skillSchedulesPanel(extracted): adds New scheduled task primary button, spec empty-state copy (calendar icon, "Nothing scheduled yet"), "New chat"/"Same chat" badge on copilot follow-up rows (graph rows already had the green "Agent run" badge)IntegrationsPanel(moved fromsettings/integrations/components): unchanged behavior; header title can be hidden inside the modalcomponents/contextual/guidedPrompts.ts(verbatim PRD copy)Notes:
store_skill,schedule_followupwith new-vs-same-session support, skills/schedules REST routes).schedule_followupcopilot tool is gated by thecopilot-scheduled-followupsLaunchDarkly flag — users without it can send the guided prompt but AutoPilot won't have the tool available.Checklist 📋
For code changes:
?modal=deep link, close on dismiss/copilot#prompt=