-
[OPIK-5622] [FE] feat: revamp agent configuration version UI and edit flow (#6219)
frostbyte_neo 发布于
2026-04-14 12:33:45 +00:00 - [OPIK-5622] [FE] feat: revamp agent configuration version UI and edit flow
Introduce a shared CollapsibleField component (with expand-all/collapse-all
controller) used across the agent configuration detail view, the new side-panel
edit flow, and the agent sandbox. Single-line values render expanded; multi-line
values collapse by default.On the configuration page, editing a version now opens an 872px side panel with
a sticky header, notes textarea, collapsible fields, and a sticky action bar.
The diff view is toggled in-place within the same panel (Show diff / Back to
edit) and "Save as new version" works from either view. Version notes truncate
with Show more in the read-only detail view.In the sandbox, the Configuration tab adopts the same field component, shows an
"Unsaved changes" tag, and exposes an explicit "Save configuration" action
which surfaces a confirmation toast linking back to the Agent configuration
page. Obsolete SaveVersionDialog and unused BlueprintDiffDialog wrapper removed.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- feat(agent-config): polish version UI per Figma feedback
Restructure field rendering to match the Figma hierarchy: the outer
field header (type icon + name + info) now sits without card chrome on
the surface, while bordered CollapsibleBlocks act as the collapsible
units underneath. Chat prompts render each message (System, Prompt,
etc.) as its own labeled CollapsibleBlock via a new
BlueprintValuePromptCompact + BlueprintChatMessages component pair, so
agent-configuration views no longer reuse the playground prompt chrome.Apply remaining UI feedback: gray icons on Deploy to / Edit
configuration, "Deploy to..." copy with circle-fading-arrow-up icon,
in-place Show diff / Back to edit toggle with git-compare and undo-2
icons, "Compare {name} -> current changes" header, "Add version notes"
textarea above the Edit fields row, 48px panel header, save
configuration button with save + arrow-up-right icons, "Edited"
indicator with red dot replacing the orange tag, save toast wired to
the new blueprint id so it reads "You have created {versionName}",
focus-within highlight on collapsible blocks, scrollbar-gutter stable
on the configuration page, descriptions always shown in the diff
table, bare scalar editors (no card) for non collapsible fields in
edit mode, and a broadcast-driven Expand all / Collapse all that also
fans out to prompt chat messages.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- fix(agent-config): UX review — typography, button styling, prompt editing
- Panel header + "Edit fields" title: comet-body-accented (16px) instead of 14px
- Expand/collapse icon inherits button text color (no longer looks disabled)
- Detail view: override text-foreground on expand/collapse wrapper
- Editable prompts: white card background, borderless auto-sizing textarea
- Spacing: 1rem between textarea and Edit fields heading
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- fix(agent-config): address baz-reviewer feedback
- Remove useMemo on hardcoded title string (#2)
- Reset broadcast.action to null on individual toggle so allExpanded
doesn't get stuck (#3) - Preserve multimodal content array in handleChangeMessage — only
update text parts, keep image/video/audio intact (#5) - Extract AutoResizeTextarea component to deduplicate inline
auto-sizing logic from BlueprintChatMessages and
BlueprintValuePromptCompact (#6)
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- feat(agent-config): add message management actions to chat prompt editor
Editable chat messages now support: role selector dropdown (System /
User / Assistant), move up/down reordering, duplicate, delete, and
"Add message" button. CollapsibleBlock gains trailing and headerPrefix
props to host these controls in the header row.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- fix(agent-config): auto-resize on controlled value + type=button on drag handle
- AutoResizeTextarea: useEffect keyed on value recalculates height
so external value changes (e.g. expand all) don't clip content - Drag handle button: add type="button" to prevent form submission
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- fix(agent-config): rename Add message to Message, remove config page toast
- Button label: "Message" instead of "Add message" (plus icon provides context)
- Remove toast from config page save (only sandbox shows toast per spec)
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Co-authored-by: Claude Opus 4.6 (1M context) noreply@anthropic.com
下载附件