mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 02:40:14 +01:00
👤 feat: Agent Avatar Removal and Decouple upload/reset from Agent Updates (#10527)
* ✨ feat: Enhance agent avatar management with upload and reset functionality * ✨ feat: Refactor AvatarMenu to use DropdownPopup for improved UI and functionality * ✨ feat: Improve avatar upload handling in AgentPanel to suppress misleading "no changes" toast * ✨ feat: Refactor toast message handling and payload composition in AgentPanel for improved clarity and functionality * ✨ feat: Enhance agent avatar functionality with upload, reset, and validation improvements * ✨ feat: Refactor agent avatar upload handling and enhance related components for improved functionality and user experience * feat(agents): tighten ACL, harden GETs/search, and sanitize action metadata stop persisting refreshed S3 URLs on GET; compute per-response only enforce ACL EDIT on revert route; remove legacy admin/author/collab checks sanitize action metadata before persisting during duplication (api_key, oauth_client_id, oauth_client_secret) escape user search input, cap length (100), and use Set for public flag mapping add explicit req.file guard in avatar upload; fix empty catch lint; remove unused imports * feat: Remove outdated avatar-related translation keys * feat: Improve error logging for avatar updates and streamline file input handling * feat(agents): implement caching for S3 avatar refresh in agent list responses * fix: replace unconventional 'void e' with explicit comment to clarify intentionally ignored error Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat(agents): enhance avatar handling and improve search functionality * fix: clarify intentionally ignored error in agent list handler --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Marco Beretta
GitHub
parent
c0cb48256e
commit
8907bd5d7c
17 changed files with 931 additions and 398 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { Plus } from 'lucide-react';
|
||||
import React, { useMemo, useCallback, useRef } from 'react';
|
||||
import React, { useMemo, useCallback, useRef, useState } from 'react';
|
||||
import { Button, useToastContext } from '@librechat/client';
|
||||
import { useWatch, useForm, FormProvider } from 'react-hook-form';
|
||||
import { useWatch, useForm, FormProvider, type FieldNamesMarkedBoolean } from 'react-hook-form';
|
||||
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
|
||||
import {
|
||||
Tools,
|
||||
|
|
@ -12,11 +12,13 @@ import {
|
|||
isAssistantsEndpoint,
|
||||
} from 'librechat-data-provider';
|
||||
import type { AgentForm, StringOption } from '~/common';
|
||||
import type { Agent } from 'librechat-data-provider';
|
||||
import {
|
||||
useCreateAgentMutation,
|
||||
useUpdateAgentMutation,
|
||||
useGetAgentByIdQuery,
|
||||
useGetExpandedAgentByIdQuery,
|
||||
useUploadAgentAvatarMutation,
|
||||
} from '~/data-provider';
|
||||
import { createProviderOption, getDefaultAgentFormValues } from '~/utils';
|
||||
import { useResourcePermissions } from '~/hooks/useResourcePermissions';
|
||||
|
|
@ -30,6 +32,176 @@ import AgentSelect from './AgentSelect';
|
|||
import AgentFooter from './AgentFooter';
|
||||
import ModelPanel from './ModelPanel';
|
||||
|
||||
/* Helpers */
|
||||
function getUpdateToastMessage(
|
||||
noVersionChange: boolean,
|
||||
avatarActionState: AgentForm['avatar_action'],
|
||||
name: string | undefined,
|
||||
localize: (key: string, vars?: Record<string, unknown> | Array<string | number>) => string,
|
||||
): string | null {
|
||||
// If only avatar upload is pending (separate endpoint), suppress the no-changes toast.
|
||||
if (noVersionChange && avatarActionState === 'upload') {
|
||||
return null;
|
||||
}
|
||||
if (noVersionChange) {
|
||||
return localize('com_ui_no_changes');
|
||||
}
|
||||
return `${localize('com_assistants_update_success')} ${name ?? localize('com_ui_agent')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalizes the payload sent to the agent update/create endpoints.
|
||||
* Handles avatar reset requests for persistent agents independently of avatar uploads.
|
||||
* @param {AgentForm} data - Form data from the agent configuration form.
|
||||
* @param {string | null} [agent_id] - Agent identifier, if the agent already exists.
|
||||
* @returns {{ payload: Partial<AgentForm>; provider: string; model: string }} Payload metadata.
|
||||
*/
|
||||
export function composeAgentUpdatePayload(data: AgentForm, agent_id?: string | null) {
|
||||
const {
|
||||
name,
|
||||
artifacts,
|
||||
description,
|
||||
instructions,
|
||||
model: _model,
|
||||
model_parameters,
|
||||
provider: _provider,
|
||||
agent_ids,
|
||||
edges,
|
||||
end_after_tools,
|
||||
hide_sequential_outputs,
|
||||
recursion_limit,
|
||||
category,
|
||||
support_contact,
|
||||
avatar_action: avatarActionState,
|
||||
} = data;
|
||||
|
||||
const shouldResetAvatar =
|
||||
avatarActionState === 'reset' && Boolean(agent_id) && !isEphemeralAgent(agent_id);
|
||||
const model = _model ?? '';
|
||||
const provider =
|
||||
(typeof _provider === 'string' ? _provider : (_provider as StringOption).value) ?? '';
|
||||
|
||||
return {
|
||||
payload: {
|
||||
name,
|
||||
artifacts,
|
||||
description,
|
||||
instructions,
|
||||
model,
|
||||
provider,
|
||||
model_parameters,
|
||||
agent_ids,
|
||||
edges,
|
||||
end_after_tools,
|
||||
hide_sequential_outputs,
|
||||
recursion_limit,
|
||||
category,
|
||||
support_contact,
|
||||
...(shouldResetAvatar ? { avatar: null } : {}),
|
||||
},
|
||||
provider,
|
||||
model,
|
||||
} as const;
|
||||
}
|
||||
|
||||
type UploadAvatarFn = (variables: { agent_id: string; formData: FormData }) => Promise<Agent>;
|
||||
|
||||
export interface PersistAvatarChangesParams {
|
||||
agentId?: string | null;
|
||||
avatarActionState: AgentForm['avatar_action'];
|
||||
avatarFile?: File | null;
|
||||
uploadAvatar: UploadAvatarFn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Uploads a new avatar when the form indicates an avatar upload is pending.
|
||||
* The helper ensures we only attempt uploads for persisted agents and when
|
||||
* the avatar action is explicitly set to "upload".
|
||||
* @returns {Promise<boolean>} Resolves true if an upload occurred, false otherwise.
|
||||
*/
|
||||
export async function persistAvatarChanges({
|
||||
agentId,
|
||||
avatarActionState,
|
||||
avatarFile,
|
||||
uploadAvatar,
|
||||
}: PersistAvatarChangesParams): Promise<boolean> {
|
||||
if (!agentId || isEphemeralAgent(agentId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (avatarActionState !== 'upload' || !avatarFile) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', avatarFile, avatarFile.name);
|
||||
|
||||
await uploadAvatar({
|
||||
agent_id: agentId,
|
||||
formData,
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
const AVATAR_ONLY_DIRTY_FIELDS = new Set(['avatar_action', 'avatar_file', 'avatar_preview']);
|
||||
const IGNORED_DIRTY_FIELDS = new Set(['agent']);
|
||||
|
||||
const isNestedDirtyField = (
|
||||
value: FieldNamesMarkedBoolean<AgentForm>[keyof AgentForm],
|
||||
): value is FieldNamesMarkedBoolean<AgentForm> => typeof value === 'object' && value !== null;
|
||||
|
||||
const evaluateDirtyFields = (
|
||||
fields: FieldNamesMarkedBoolean<AgentForm>,
|
||||
): { sawDirty: boolean; onlyAvatarDirty: boolean } => {
|
||||
let sawDirty = false;
|
||||
|
||||
for (const [key, value] of Object.entries(fields)) {
|
||||
if (!value) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (IGNORED_DIRTY_FIELDS.has(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (isNestedDirtyField(value)) {
|
||||
const nested = evaluateDirtyFields(value);
|
||||
if (!nested.onlyAvatarDirty) {
|
||||
return { sawDirty: true, onlyAvatarDirty: false };
|
||||
}
|
||||
sawDirty = sawDirty || nested.sawDirty;
|
||||
continue;
|
||||
}
|
||||
|
||||
sawDirty = true;
|
||||
|
||||
if (AVATAR_ONLY_DIRTY_FIELDS.has(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
return { sawDirty: true, onlyAvatarDirty: false };
|
||||
}
|
||||
|
||||
return { sawDirty, onlyAvatarDirty: true };
|
||||
};
|
||||
|
||||
/**
|
||||
* Determines whether the dirty form state only contains avatar uploads/resets.
|
||||
* This enables short-circuiting the general agent update flow when only the avatar
|
||||
* needs to be uploaded.
|
||||
*/
|
||||
export const isAvatarUploadOnlyDirty = (
|
||||
dirtyFields?: FieldNamesMarkedBoolean<AgentForm>,
|
||||
): boolean => {
|
||||
if (!dirtyFields) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const result = evaluateDirtyFields(dirtyFields);
|
||||
return result.sawDirty && result.onlyAvatarDirty;
|
||||
};
|
||||
|
||||
export default function AgentPanel() {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
|
|
@ -67,7 +239,58 @@ export default function AgentPanel() {
|
|||
mode: 'onChange',
|
||||
});
|
||||
|
||||
const { control, handleSubmit, reset } = methods;
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
getValues,
|
||||
setValue,
|
||||
formState: { dirtyFields },
|
||||
} = methods;
|
||||
const [isAvatarUploadInFlight, setIsAvatarUploadInFlight] = useState(false);
|
||||
const uploadAvatarMutation = useUploadAgentAvatarMutation({
|
||||
onSuccess: (updatedAgent) => {
|
||||
showToast({ message: localize('com_ui_upload_agent_avatar') });
|
||||
|
||||
setValue('avatar_preview', updatedAgent.avatar?.filepath ?? '', { shouldDirty: false });
|
||||
setValue('avatar_file', null, { shouldDirty: false });
|
||||
setValue('avatar_action', null, { shouldDirty: false });
|
||||
|
||||
const agentOption = getValues('agent');
|
||||
if (agentOption && typeof agentOption !== 'string') {
|
||||
setValue('agent', { ...agentOption, ...updatedAgent }, { shouldDirty: false });
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
showToast({ message: localize('com_ui_upload_error'), status: 'error' });
|
||||
},
|
||||
});
|
||||
|
||||
const handleAvatarUpload = useCallback(
|
||||
async (agentId?: string | null) => {
|
||||
const avatarActionState = getValues('avatar_action');
|
||||
const avatarFile = getValues('avatar_file');
|
||||
if (!agentId || isEphemeralAgent(agentId) || avatarActionState !== 'upload' || !avatarFile) {
|
||||
return false;
|
||||
}
|
||||
|
||||
setIsAvatarUploadInFlight(true);
|
||||
try {
|
||||
return await persistAvatarChanges({
|
||||
agentId,
|
||||
avatarActionState,
|
||||
avatarFile,
|
||||
uploadAvatar: uploadAvatarMutation.mutateAsync,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[AgentPanel] Avatar upload failed', error);
|
||||
throw error;
|
||||
} finally {
|
||||
setIsAvatarUploadInFlight(false);
|
||||
}
|
||||
},
|
||||
[getValues, uploadAvatarMutation],
|
||||
);
|
||||
const agent_id = useWatch({ control, name: 'id' });
|
||||
const previousVersionRef = useRef<number | undefined>();
|
||||
|
||||
|
|
@ -97,20 +320,41 @@ export default function AgentPanel() {
|
|||
// Store the current version before mutation
|
||||
previousVersionRef.current = agentQuery.data?.version;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
// Check if agent version is the same (no changes were made)
|
||||
if (previousVersionRef.current !== undefined && data.version === previousVersionRef.current) {
|
||||
onSuccess: async (data) => {
|
||||
const avatarActionState = getValues('avatar_action');
|
||||
const noVersionChange =
|
||||
previousVersionRef.current !== undefined && data.version === previousVersionRef.current;
|
||||
const toastMessage = getUpdateToastMessage(
|
||||
noVersionChange,
|
||||
avatarActionState,
|
||||
data.name,
|
||||
localize,
|
||||
);
|
||||
if (toastMessage) {
|
||||
showToast({ message: toastMessage, status: noVersionChange ? 'info' : undefined });
|
||||
}
|
||||
|
||||
const agentOption = getValues('agent');
|
||||
if (agentOption && typeof agentOption !== 'string') {
|
||||
setValue('agent', { ...agentOption, ...data }, { shouldDirty: false });
|
||||
}
|
||||
|
||||
try {
|
||||
await handleAvatarUpload(data.id ?? agent_id);
|
||||
} catch (error) {
|
||||
console.error('[AgentPanel] Avatar upload failed after update', error);
|
||||
showToast({
|
||||
message: localize('com_ui_no_changes'),
|
||||
status: 'info',
|
||||
});
|
||||
} else {
|
||||
showToast({
|
||||
message: `${localize('com_assistants_update_success')} ${
|
||||
data.name ?? localize('com_ui_agent')
|
||||
}`,
|
||||
message: localize('com_agents_avatar_upload_error'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
if (avatarActionState === 'reset') {
|
||||
setValue('avatar_action', null, { shouldDirty: false });
|
||||
setValue('avatar_file', null, { shouldDirty: false });
|
||||
setValue('avatar_preview', '', { shouldDirty: false });
|
||||
}
|
||||
|
||||
// Clear the ref after use
|
||||
previousVersionRef.current = undefined;
|
||||
},
|
||||
|
|
@ -126,13 +370,23 @@ export default function AgentPanel() {
|
|||
});
|
||||
|
||||
const create = useCreateAgentMutation({
|
||||
onSuccess: (data) => {
|
||||
onSuccess: async (data) => {
|
||||
setCurrentAgentId(data.id);
|
||||
showToast({
|
||||
message: `${localize('com_assistants_create_success')} ${
|
||||
data.name ?? localize('com_ui_agent')
|
||||
}`,
|
||||
});
|
||||
|
||||
try {
|
||||
await handleAvatarUpload(data.id);
|
||||
} catch (error) {
|
||||
console.error('[AgentPanel] Avatar upload failed after create', error);
|
||||
showToast({
|
||||
message: localize('com_agents_avatar_upload_error'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (err) => {
|
||||
const error = err as Error;
|
||||
|
|
@ -146,7 +400,7 @@ export default function AgentPanel() {
|
|||
});
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(data: AgentForm) => {
|
||||
async (data: AgentForm) => {
|
||||
const tools = data.tools ?? [];
|
||||
|
||||
if (data.execute_code === true) {
|
||||
|
|
@ -159,48 +413,28 @@ export default function AgentPanel() {
|
|||
tools.push(Tools.web_search);
|
||||
}
|
||||
|
||||
const {
|
||||
name,
|
||||
artifacts,
|
||||
description,
|
||||
instructions,
|
||||
model: _model,
|
||||
model_parameters,
|
||||
provider: _provider,
|
||||
agent_ids,
|
||||
edges,
|
||||
end_after_tools,
|
||||
hide_sequential_outputs,
|
||||
recursion_limit,
|
||||
category,
|
||||
support_contact,
|
||||
} = data;
|
||||
|
||||
const model = _model ?? '';
|
||||
const provider =
|
||||
(typeof _provider === 'string' ? _provider : (_provider as StringOption).value) ?? '';
|
||||
const { payload: basePayload, provider, model } = composeAgentUpdatePayload(data, agent_id);
|
||||
|
||||
if (agent_id) {
|
||||
update.mutate({
|
||||
agent_id,
|
||||
data: {
|
||||
name,
|
||||
artifacts,
|
||||
description,
|
||||
instructions,
|
||||
model,
|
||||
tools,
|
||||
provider,
|
||||
model_parameters,
|
||||
agent_ids,
|
||||
edges,
|
||||
end_after_tools,
|
||||
hide_sequential_outputs,
|
||||
recursion_limit,
|
||||
category,
|
||||
support_contact,
|
||||
},
|
||||
});
|
||||
if (data.avatar_action === 'upload' && isAvatarUploadOnlyDirty(dirtyFields)) {
|
||||
try {
|
||||
const uploaded = await handleAvatarUpload(agent_id);
|
||||
if (!uploaded) {
|
||||
showToast({
|
||||
message: localize('com_agents_avatar_upload_error'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[AgentPanel] Avatar upload failed for avatar-only submission', error);
|
||||
showToast({
|
||||
message: localize('com_agents_avatar_upload_error'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
update.mutate({ agent_id, data: { ...basePayload, tools } });
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -210,32 +444,16 @@ export default function AgentPanel() {
|
|||
status: 'error',
|
||||
});
|
||||
}
|
||||
if (!name) {
|
||||
if (!data.name) {
|
||||
return showToast({
|
||||
message: localize('com_agents_missing_name'),
|
||||
status: 'error',
|
||||
});
|
||||
}
|
||||
|
||||
create.mutate({
|
||||
name,
|
||||
artifacts,
|
||||
description,
|
||||
instructions,
|
||||
model,
|
||||
tools,
|
||||
provider,
|
||||
model_parameters,
|
||||
agent_ids,
|
||||
edges,
|
||||
end_after_tools,
|
||||
hide_sequential_outputs,
|
||||
recursion_limit,
|
||||
category,
|
||||
support_contact,
|
||||
});
|
||||
create.mutate({ ...basePayload, model, tools, provider });
|
||||
},
|
||||
[agent_id, create, update, showToast, localize],
|
||||
[agent_id, create, dirtyFields, handleAvatarUpload, update, showToast, localize],
|
||||
);
|
||||
|
||||
const handleSelectAgent = useCallback(() => {
|
||||
|
|
@ -330,7 +548,7 @@ export default function AgentPanel() {
|
|||
<ModelPanel models={models} providers={providers} setActivePanel={setActivePanel} />
|
||||
)}
|
||||
{canEditAgent && !agentQuery.isInitialLoading && activePanel === Panel.builder && (
|
||||
<AgentConfig createMutation={create} />
|
||||
<AgentConfig />
|
||||
)}
|
||||
{canEditAgent && !agentQuery.isInitialLoading && activePanel === Panel.advanced && (
|
||||
<AdvancedPanel />
|
||||
|
|
@ -339,6 +557,7 @@ export default function AgentPanel() {
|
|||
<AgentFooter
|
||||
createMutation={create}
|
||||
updateMutation={update}
|
||||
isAvatarUploading={isAvatarUploadInFlight || uploadAvatarMutation.isPending}
|
||||
activePanel={activePanel}
|
||||
setActivePanel={setActivePanel}
|
||||
setCurrentAgentId={setCurrentAgentId}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue