Eli2 130/change agent update to send only changed fields

packages/client/src/components/agent-creator.tsx

@@ -7,25 +7,32 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AvatarPanel from './avatar-panel';
 import PluginsPanel from './plugins-panel';
-import SecretPanel from './secret-panel';
+import { SecretPanel } from './secret-panel';
+import { useAgentUpdate } from '@/hooks/use-agent-update';
 
-const defaultCharacter = {
+// Define a partial agent for initialization
+const defaultCharacter: Partial<Agent> = {
   name: '',
   username: '',
   system: '',
   bio: [] as string[],
   topics: [] as string[],
   adjectives: [] as string[],
-} as Agent;
+  plugins: ['@elizaos/plugin-sql', '@elizaos/plugin-local-ai'],
+  settings: { secrets: {} },
+};
 
 export default function AgentCreator() {
   const navigate = useNavigate();
   const { toast } = useToast();
   const queryClient = useQueryClient();
-  const [characterValue, setCharacterValue] = useState<Agent>({
+  const [initialCharacter] = useState<Partial<Agent>>({
     ...defaultCharacter,
   });
 
+  // Use agent update hook for proper handling of nested fields
+  const agentState = useAgentUpdate(initialCharacter as Agent);
+
   const ensureRequiredFields = (character: Agent): Agent => {
     return {
       ...character,
@@ -40,6 +47,7 @@ export default function AgentCreator() {
         chat: character.style?.chat ?? [],
         post: character.style?.post ?? [],
       },
+      settings: character.settings ?? { secrets: {} },
     };
   };
 
@@ -70,12 +78,12 @@ export default function AgentCreator() {
 
   return (
     <CharacterForm
-      characterValue={characterValue}
-      setCharacterValue={setCharacterValue}
+      characterValue={agentState.agent}
+      setCharacterValue={agentState}
       title="Character Settings"
       description="Configure your AI character's behavior and capabilities"
       onSubmit={handleSubmit}
-      onReset={() => setCharacterValue(defaultCharacter)}
+      onReset={() => agentState.reset()}
       onDelete={() => {
         navigate('/');
       }}
@@ -84,19 +92,24 @@ export default function AgentCreator() {
         {
           name: 'Plugins',
           component: (
-            <PluginsPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <PluginsPanel characterValue={agentState.agent} setCharacterValue={agentState} />
           ),
         },
         {
           name: 'Secret',
           component: (
-            <SecretPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <SecretPanel
+              characterValue={agentState.agent}
+              onChange={(updatedAgent) => {
+                agentState.updateSettings(updatedAgent.settings);
+              }}
+            />
           ),
         },
         {
           name: 'Avatar',
           component: (
-            <AvatarPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <AvatarPanel characterValue={agentState.agent} setCharacterValue={agentState} />
           ),
         },
       ]}

packages/client/src/components/agent-settings.tsx

@@ -1,35 +1,53 @@
 import CharacterForm from '@/components/character-form';
 import { useToast } from '@/hooks/use-toast';
+import { useAgentUpdate } from '@/hooks/use-agent-update';
 import { apiClient } from '@/lib/api';
 import type { Agent, UUID } from '@elizaos/core';
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AvatarPanel from './avatar-panel';
 import PluginsPanel from './plugins-panel';
-import SecretPanel from './secret-panel';
+import { SecretPanel } from './secret-panel';
 
 export default function AgentSettings({ agent, agentId }: { agent: Agent; agentId: UUID }) {
   const { toast } = useToast();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const [characterValue, setCharacterValue] = useState<Agent>(agent);
 
-  const handleSubmit = async (updatedAgent: Agent) => {
+  // Use our enhanced agent update hook for more intelligent handling of JSONb fields
+  const agentState = useAgentUpdate(agent);
+
+  // Log whenever agent state changes
+  useEffect(() => {}, [agentState.agent]);
+
+  const handleSubmit = async () => {
     try {
-      // Call the API to update the agent's character
       if (!agentId) {
         throw new Error('Agent ID is missing');
       }
 
-      // Make sure plugins are preserved
-      const mergedAgent = {
-        ...updatedAgent,
-        plugins: characterValue.plugins, // Preserve the plugins from our local state
+      // Get only the fields that have changed
+      const changedFields = agentState.getChangedFields();
+
+      // No need to send update if nothing changed
+      if (Object.keys(changedFields).length === 0) {
+        toast({
+          title: 'No Changes',
+          description: 'No changes were made to the agent',
+        });
+        navigate('/');
+        return;
+      }
+
+      // Always include the ID
+      const partialUpdate = {
+        id: agentId,
+        ...changedFields,
       };
 
-      // Send the character update request to the agent endpoint
-      await apiClient.updateAgent(agentId, mergedAgent);
+      // Send the partial update
+      await apiClient.updateAgent(agentId, partialUpdate as Agent);
 
       // Invalidate both the agent query and the agents list
       queryClient.invalidateQueries({ queryKey: ['agent', agentId] });
@@ -51,43 +69,66 @@ export default function AgentSettings({ agent, agentId }: { agent: Agent; agentI
     }
   };
 
-  const handleDelete = async (agent: Agent) => {
+  const handleDelete = async () => {
     try {
-      await apiClient.deleteAgent(agent.id as UUID);
+      await apiClient.deleteAgent(agentId);
       queryClient.invalidateQueries({ queryKey: ['agents'] });
       navigate('/');
+
+      toast({
+        title: 'Success',
+        description: 'Agent deleted successfully',
+      });
     } catch (error) {
-      console.error('Error deleting agent:', error);
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to delete agent',
+        variant: 'destructive',
+      });
     }
   };
 
   return (
     <CharacterForm
-      characterValue={characterValue}
-      setCharacterValue={setCharacterValue}
+      characterValue={agentState.agent}
+      setCharacterValue={agentState}
       title="Character Settings"
       description="Configure your AI character's behavior and capabilities"
       onSubmit={handleSubmit}
-      onReset={() => setCharacterValue(agent)}
-      onDelete={() => handleDelete(agent)}
+      onReset={agentState.reset}
+      onDelete={handleDelete}
       isAgent={true}
       customComponents={[
         {
           name: 'Plugins',
           component: (
-            <PluginsPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <PluginsPanel characterValue={agentState.agent} setCharacterValue={agentState} />
           ),
         },
         {
           name: 'Secret',
           component: (
-            <SecretPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <SecretPanel
+              characterValue={agentState.agent}
+              onChange={(updatedAgent) => {
+                if (updatedAgent.settings && updatedAgent.settings.secrets) {
+                  // Create a new settings object with the updated secrets
+                  const updatedSettings = {
+                    ...agentState.agent.settings,
+                    secrets: updatedAgent.settings.secrets,
+                  };
+
+                  // Use updateSettings to properly handle the secrets
+                  agentState.updateSettings(updatedSettings);
+                }
+              }}
+            />
           ),
         },
         {
           name: 'Avatar',
           component: (
-            <AvatarPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <AvatarPanel characterValue={agentState.agent} setCharacterValue={agentState} />
           ),
         },
       ]}

packages/client/src/components/avatar-panel.tsx

@@ -1,39 +1,67 @@
 import { Button } from '@/components/ui/button';
 import type { Agent } from '@elizaos/core';
 import { Image as ImageIcon, Upload, X } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { compressImage } from '@/lib/utils';
 
 interface AvatarPanelProps {
   characterValue: Agent;
-  setCharacterValue: (value: (prev: Agent) => Agent) => void;
+  setCharacterValue: {
+    updateAvatar?: (avatarUrl: string) => void;
+    updateSetting?: <T>(path: string, value: T) => void;
+    updateField?: <T>(path: string, value: T) => void;
+    [key: string]: any;
+  };
 }
 
 export default function AvatarPanel({ characterValue, setCharacterValue }: AvatarPanelProps) {
   const [avatar, setAvatar] = useState<string | null>(characterValue?.settings?.avatar || null);
+  const [hasChanged, setHasChanged] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Reset the change flag when component initializes or character changes
+  useEffect(() => {
+    setAvatar(characterValue?.settings?.avatar || null);
+    setHasChanged(false);
+  }, [characterValue.id]);
+
   const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       try {
         const compressedImage = await compressImage(file);
         setAvatar(compressedImage);
+        setHasChanged(true);
+
+        // Only update when there's a real change
+        updateCharacterAvatar(compressedImage);
       } catch (error) {
         console.error('Error compressing image:', error);
       }
     }
   };
 
-  useEffect(() => {
-    setCharacterValue((prev) => ({
-      ...prev,
-      settings: {
-        ...prev.settings,
-        avatar: avatar,
-      },
-    }));
-  }, [avatar, setCharacterValue]);
+  const handleRemoveAvatar = () => {
+    if (avatar) {
+      setAvatar(null);
+      setHasChanged(true);
+      updateCharacterAvatar('');
+    }
+  };
+
+  // Centralized update function to avoid code duplication
+  const updateCharacterAvatar = (avatarUrl: string) => {
+    if (setCharacterValue.updateAvatar) {
+      // Use the specialized method for avatar updates when available
+      setCharacterValue.updateAvatar(avatarUrl);
+    } else if (setCharacterValue.updateSetting) {
+      // Use updateSetting as fallback
+      setCharacterValue.updateSetting('avatar', avatarUrl);
+    } else if (setCharacterValue.updateField) {
+      // Last resort - use the generic field update
+      setCharacterValue.updateField('settings.avatar', avatarUrl);
+    }
+  };
 
   return (
     <div className="rounded-lg w-full">
@@ -45,7 +73,7 @@ export default function AvatarPanel({ characterValue, setCharacterValue }: Avata
             <img src={avatar} alt="Character Avatar" className="object-cover rounded-lg border" />
             <button
               className="absolute -top-2 -right-2 bg-white p-1 rounded-full shadow-md"
-              onClick={() => setAvatar(null)}
+              onClick={handleRemoveAvatar}
               type="button"
             >
               <X className="w-5 h-5 text-card" />
@@ -67,6 +95,8 @@ export default function AvatarPanel({ characterValue, setCharacterValue }: Avata
         <Button className="flex items-center gap-2" onClick={() => fileInputRef.current?.click()}>
           <Upload className="w-5 h-5" /> Upload Avatar
         </Button>
+
+        {hasChanged && <p className="text-xs text-blue-500">Avatar has been updated</p>}
       </div>
     </div>
   );