diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx index d48e2e03f7..3b3d687afa 100644 --- a/client/src/components/SidePanel/Agents/AgentPanel.tsx +++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx @@ -320,16 +320,26 @@ export default function AgentPanel() { }, [clearDraftsForAgentIds, reset, setCurrentAgentId]); const shouldPersistDraft = hasPersistableDirtyFields(dirtyFields); + const shouldPersistAvatarResetDraft = + dirtyFields?.avatar_action === true && getValues('avatar_action') === 'reset'; const isDirtyPersistableDraftField = useCallback( (name?: string): boolean => { + const [fieldName] = name?.split('.') ?? []; + if (fieldName === 'avatar_action') { + return ( + getFieldState(name as FieldPath).isDirty && + getValues('avatar_action') === 'reset' + ); + } + if (!isPersistableDraftField(name)) { return false; } return getFieldState(name as FieldPath).isDirty; }, - [getFieldState], + [getFieldState, getValues], ); useEffect(() => { @@ -367,13 +377,13 @@ export default function AgentPanel() { }, [hasDraft]); useEffect(() => { - if (!shouldPersistDraft) { + if (!shouldPersistDraft && !shouldPersistAvatarResetDraft) { return; } shouldPersistDraftRef.current = true; persistAgentDraft(currentAgentIdRef.current, getValues()); - }, [getValues, persistAgentDraft, shouldPersistDraft]); + }, [getValues, persistAgentDraft, shouldPersistAvatarResetDraft, shouldPersistDraft]); useEffect(() => { const subscription = watch((_, { name }) => { diff --git a/client/src/components/SidePanel/Agents/__tests__/AgentPanel.drafts.spec.tsx b/client/src/components/SidePanel/Agents/__tests__/AgentPanel.drafts.spec.tsx index f946e39d50..e649d4f060 100644 --- a/client/src/components/SidePanel/Agents/__tests__/AgentPanel.drafts.spec.tsx +++ b/client/src/components/SidePanel/Agents/__tests__/AgentPanel.drafts.spec.tsx @@ -23,6 +23,8 @@ const AGENTS_BUTTON_LABEL = 'Agents'; const FILES_BUTTON_LABEL = 'Files'; const FILES_PANEL_LABEL = 'Files panel'; const PROGRAMMATIC_UPDATE_LABEL = 'Programmatic agent update'; +const AVATAR_ACTION_LABEL = 'Avatar action'; +const RESET_AVATAR_LABEL = 'Reset avatar'; const MOCK_USER_ID = 'user-123'; type MockButtonProps = React.ButtonHTMLAttributes & { @@ -166,13 +168,20 @@ jest.mock('../AgentConfig', () => ({ const { useFormContext } = jest.requireActual( 'react-hook-form', ) as typeof import('react-hook-form'); - const { register } = useFormContext(); + const { register, setValue } = useFormContext(); return (