feat: add partial agent update

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

@@ -1,9 +1,11 @@
 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 { deepMerge } from '@/lib/utils';
 import type { Agent, UUID } from '@elizaos/core';
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AvatarPanel from './avatar-panel';
 import PluginsPanel from './plugins-panel';
@@ -13,20 +15,40 @@ export default function AgentSettings({ agent, agentId }: { agent: Agent; agentI
   const { toast } = useToast();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
+  // Use our agent update hook for more intelligent handling of JSONb fields
+  const { agent: agentState, updateObject, reset } = useAgentUpdate(agent);
   const [characterValue, setCharacterValue] = useState<Agent>(agent);
 
+  // Keep characterValue in sync with agentState (our source of truth)
+  useEffect(() => {
+    setCharacterValue(agentState);
+  }, [agentState]);
+
+  // When setCharacterValue is called, update our agentState
+  const handleCharacterValueChange = (updater: (prev: Agent) => Agent) => {
+    const newValue = updater(characterValue);
+    updateObject(newValue);
+    setCharacterValue(newValue);
+  };
+
   const handleSubmit = async (updatedAgent: Agent) => {
     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 = {
+      // Make sure we're properly merging all JSONb fields
+      // Get the original agent to ensure we're starting with complete data
+      const { data: currentAgent } = await apiClient.getAgent(agentId);
+
+      // Create a properly merged agent object
+      // This ensures all JSONb fields are correctly handled
+      const mergedAgent = deepMerge(currentAgent, {
         ...updatedAgent,
         plugins: characterValue.plugins, // Preserve the plugins from our local state
-      };
+      });
 
       // Send the character update request to the agent endpoint
       await apiClient.updateAgent(agentId, mergedAgent);
@@ -64,30 +86,39 @@ export default function AgentSettings({ agent, agentId }: { agent: Agent; agentI
   return (
     <CharacterForm
       characterValue={characterValue}
-      setCharacterValue={setCharacterValue}
+      setCharacterValue={handleCharacterValueChange}
       title="Character Settings"
       description="Configure your AI character's behavior and capabilities"
       onSubmit={handleSubmit}
-      onReset={() => setCharacterValue(agent)}
+      onReset={() => reset()}
       onDelete={() => handleDelete(agent)}
       isAgent={true}
       customComponents={[
         {
           name: 'Plugins',
           component: (
-            <PluginsPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <PluginsPanel
+              characterValue={characterValue}
+              setCharacterValue={handleCharacterValueChange}
+            />
           ),
         },
         {
           name: 'Secret',
           component: (
-            <SecretPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <SecretPanel
+              characterValue={characterValue}
+              setCharacterValue={handleCharacterValueChange}
+            />
           ),
         },
         {
           name: 'Avatar',
           component: (
-            <AvatarPanel characterValue={characterValue} setCharacterValue={setCharacterValue} />
+            <AvatarPanel
+              characterValue={characterValue}
+              setCharacterValue={handleCharacterValueChange}
+            />
           ),
         },
       ]}

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

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { usePartialUpdate } from '@/hooks/use-partial-update';
 import type { Agent } from '@elizaos/core';
 import { Check, CloudUpload, Eye, EyeOff, MoreVertical, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
@@ -15,6 +16,9 @@ interface SecretPanelProps {
 }
 
 export default function EnvSettingsPanel({ characterValue, setCharacterValue }: SecretPanelProps) {
+  // Use our new hook to properly handle updates to nested JSONb fields
+  const [agentState, updateField] = usePartialUpdate(characterValue);
+
   const [envs, setEnvs] = useState<EnvVariable[]>(
     Object.entries(characterValue?.settings?.secrets || {}).map(([name, value]) => ({
       name,
@@ -151,15 +155,17 @@ export default function EnvSettingsPanel({ characterValue, setCharacterValue }:
     };
   }, []);
 
+  // Update the agent's settings whenever envs change
   useEffect(() => {
-    setCharacterValue((prev) => ({
-      ...prev,
-      settings: {
-        ...prev.settings,
-        secrets: Object.fromEntries(envs.map(({ name, value }) => [name, value])),
-      },
-    }));
-  }, [envs, setCharacterValue]);
+    // Create the secrets object from the envs array
+    const secrets = Object.fromEntries(envs.map(({ name, value }) => [name, value]));
+
+    // Update just the settings.secrets part without touching other settings
+    updateField('settings.secrets', secrets);
+
+    // Update the parent component's state
+    setCharacterValue(() => agentState);
+  }, [envs, setCharacterValue, updateField, agentState]);
 
   return (
     <div className="rounded-lg w-full flex flex-col gap-3">

packages/client/src/hooks/use-agent-update.ts

@@ -0,0 +1,92 @@
+import { usePartialUpdate } from '@/hooks/use-partial-update';
+import type { Agent } from '@elizaos/core';
+import { useCallback } from 'react';
+
+/**
+ * A custom hook for handling Agent updates with specific handling for JSONb fields.
+ * This hook builds on usePartialUpdate but adds Agent-specific convenience methods.
+ *
+ * @param initialAgent The initial Agent object
+ * @returns Object with agent state and update methods
+ */
+export function useAgentUpdate(initialAgent: Agent) {
+  const [agent, updateField, updateObject, reset] = usePartialUpdate(initialAgent);
+
+  /**
+   * Updates a field in the Agent's settings object
+   *
+   * @param path Path within settings (e.g., 'voice.model')
+   * @param value New value
+   */
+  const updateSetting = useCallback(
+    <T>(path: string, value: T) => {
+      updateField(`settings.${path}`, value);
+    },
+    [updateField]
+  );
+
+  /**
+   * Updates a secret in the Agent's settings.secrets object
+   *
+   * @param key Secret key
+   * @param value Secret value
+   */
+  const updateSecret = useCallback(
+    (key: string, value: string) => {
+      updateField(`settings.secrets.${key}`, value);
+    },
+    [updateField]
+  );
+
+  /**
+   * Updates or replaces an array field in the Agent
+   *
+   * @param fieldName Array field name (e.g., 'plugins', 'bio', etc.)
+   * @param value New array value
+   */
+  const updateArrayField = useCallback(
+    <T>(fieldName: string, value: T[]) => {
+      updateField(fieldName, value);
+    },
+    [updateField]
+  );
+
+  /**
+   * Updates a value in one of the style arrays
+   *
+   * @param styleType Type of style ('all', 'chat', 'post')
+   * @param index Index in the array
+   * @param value New value
+   */
+  const updateStyleItem = useCallback(
+    (styleType: 'all' | 'chat' | 'post', index: number, value: string) => {
+      updateField(`style.${styleType}.${index}`, value);
+    },
+    [updateField]
+  );
+
+  /**
+   * Sets a style array
+   *
+   * @param styleType Type of style ('all', 'chat', 'post')
+   * @param values Array of style values
+   */
+  const setStyleArray = useCallback(
+    (styleType: 'all' | 'chat' | 'post', values: string[]) => {
+      updateField(`style.${styleType}`, values);
+    },
+    [updateField]
+  );
+
+  return {
+    agent,
+    updateField,
+    updateObject,
+    updateSetting,
+    updateSecret,
+    updateArrayField,
+    updateStyleItem,
+    setStyleArray,
+    reset,
+  };
+}

packages/client/src/hooks/use-partial-update.ts

@@ -0,0 +1,112 @@
+import { deepMerge } from '@/lib/utils';
+import { useState, useCallback } from 'react';
+
+/**
+ * A custom hook for handling partial updates of objects with nested JSONb fields.
+ * This hook ensures that updates to nested objects and arrays are properly
+ * managed when sending updates to the server.
+ *
+ * @param initialValue The initial state object
+ * @returns A tuple containing:
+ *   - The current state object
+ *   - A function to update a specific field (handles nested paths)
+ *   - A function to set the entire object
+ *   - A function to reset to initial state
+ */
+export function usePartialUpdate<T extends object>(initialValue: T) {
+  const [value, setValue] = useState<T>(initialValue);
+
+  /**
+   * Updates a specific field in the object, handling nested paths
+   *
+   * @param path The path to the field to update (e.g., 'settings.voice.model')
+   * @param newValue The new value for the field
+   */
+  const updateField = useCallback(<K>(path: string, newValue: K) => {
+    setValue((prevValue) => {
+      // Handle simple (non-nested) case
+      if (!path.includes('.')) {
+        return {
+          ...prevValue,
+          [path]: newValue,
+        } as T;
+      }
+
+      // Handle nested paths
+      const pathParts = path.split('.');
+      const fieldToUpdate = pathParts[0];
+      const remainingPath = pathParts.slice(1).join('.');
+
+      // Handle arrays in path (e.g., 'style.all.0')
+      const isArrayIndex = !isNaN(Number(pathParts[1]));
+
+      if (isArrayIndex) {
+        const arrayName = pathParts[0];
+        const index = Number(pathParts[1]);
+        // Ensure we're working with an array and handle it safely
+        const currentValue = prevValue[arrayName as keyof T];
+        const array = Array.isArray(currentValue) ? [...currentValue] : [];
+
+        if (pathParts.length === 2) {
+          // Direct array item update
+          array[index] = newValue;
+        } else {
+          // Updating a property of an object in an array
+          const deeperPath = pathParts.slice(2).join('.');
+          array[index] = updateNestedObject(array[index], deeperPath, newValue);
+        }
+
+        return {
+          ...prevValue,
+          [arrayName]: array,
+        } as T;
+      }
+
+      // Handle regular nested objects
+      return {
+        ...prevValue,
+        [fieldToUpdate]: updateNestedObject(
+          prevValue[fieldToUpdate as keyof T],
+          remainingPath,
+          newValue
+        ),
+      } as T;
+    });
+  }, []);
+
+  /**
+   * Helper function to update a nested object
+   */
+  const updateNestedObject = <K, V>(obj: K, path: string, value: V): K => {
+    if (!path.includes('.')) {
+      return {
+        ...obj,
+        [path]: value,
+      } as unknown as K;
+    }
+
+    const [field, ...remainingPath] = path.split('.');
+    const nextPath = remainingPath.join('.');
+
+    return {
+      ...obj,
+      [field]: updateNestedObject((obj as any)[field] || {}, nextPath, value),
+    } as unknown as K;
+  };
+
+  /**
+   * Updates the entire object using deep merge
+   */
+  const updateObject = useCallback((newPartialValue: Partial<T>) => {
+    setValue((prev) => deepMerge(prev, newPartialValue));
+  }, []);
+
+  /**
+   * Resets to the initial state
+   */
+  const reset = useCallback(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return [value, updateField, updateObject, reset] as const;
+}

packages/client/src/lib/api.ts

@@ -1,5 +1,6 @@
 import type { Agent, Character, UUID, Memory } from '@elizaos/core';
 import { WorldManager } from './world-manager';
+import { deepMerge } from './utils';
 
 const API_PREFIX = '/api';
 
@@ -254,12 +255,31 @@ export const apiClient = {
   },
   deleteAgent: (agentId: string): Promise<{ success: boolean }> =>
     fetcher({ url: `/agents/${agentId}`, method: 'DELETE' }),
-  updateAgent: (agentId: string, agent: Agent) =>
-    fetcher({
-      url: `/agents/${agentId}`,
-      method: 'PATCH',
-      body: agent,
-    }),
+  updateAgent: async (agentId: string, agent: Agent) => {
+    // First get the current agent to ensure we have complete data
+    try {
+      const currentAgentResponse = await fetcher({ url: `/agents/${agentId}` });
+      const currentAgent = currentAgentResponse.data;
+
+      // If we have the current agent, merge the updates with it
+      // This ensures all JSONb fields are properly handled
+      const mergedAgent = currentAgent ? deepMerge(currentAgent, agent) : agent;
+
+      return fetcher({
+        url: `/agents/${agentId}`,
+        method: 'PATCH',
+        body: mergedAgent,
+      });
+    } catch (error) {
+      // If we can't get the current agent for some reason, just send the update
+      console.warn('Could not fetch current agent data before update:', error);
+      return fetcher({
+        url: `/agents/${agentId}`,
+        method: 'PATCH',
+        body: agent,
+      });
+    }
+  },
   createAgent: (params: { characterPath?: string; characterJson?: Character }) =>
     fetcher({
       url: '/agents/',

packages/client/src/lib/utils.ts

@@ -44,7 +44,7 @@ export function urlToCharacterName(urlName: string): string {
 
 // crypto.randomUUID only works in https context in firefox
 export function randomUUID(): UUID {
-  return URL.createObjectURL(new Blob()).split('/').pop();
+  return URL.createObjectURL(new Blob()).split('/').pop() as UUID;
 }
 
 export function getEntityId(): UUID {
@@ -104,3 +104,72 @@ export const compressImage = (
     reader.readAsDataURL(file);
   });
 };
+
+/**
+ * Deeply merges multiple objects together
+ * - Arrays are completely replaced (not merged)
+ * - Null values explicitly overwrite existing values
+ * - Undefined values are ignored (don't overwrite)
+ *
+ * @param target The base object to merge into
+ * @param sources One or more source objects to merge from
+ * @returns A new merged object
+ */
+export function deepMerge<T>(target: T, ...sources: Partial<T>[]): T {
+  if (!sources.length) return target;
+
+  const result = { ...target };
+
+  sources.forEach((source) => {
+    if (!source) return;
+
+    Object.keys(source).forEach((key) => {
+      const sourceValue = source[key as keyof typeof source];
+
+      // Skip undefined values - they shouldn't overwrite existing values
+      if (sourceValue === undefined) return;
+
+      // Handle null values - they should explicitly overwrite
+      if (sourceValue === null) {
+        result[key as keyof T] = null as any;
+        return;
+      }
+
+      // For arrays, completely replace them
+      if (Array.isArray(sourceValue)) {
+        result[key as keyof T] = [...sourceValue] as any;
+        return;
+      }
+
+      // For objects, recursively merge
+      if (
+        typeof sourceValue === 'object' &&
+        !Array.isArray(sourceValue) &&
+        sourceValue !== null &&
+        typeof result[key as keyof T] === 'object' &&
+        result[key as keyof T] !== null &&
+        !Array.isArray(result[key as keyof T])
+      ) {
+        result[key as keyof T] = deepMerge(result[key as keyof T] as any, sourceValue as any);
+        return;
+      }
+
+      // For all other values, just replace them
+      result[key as keyof T] = sourceValue as any;
+    });
+  });
+
+  return result;
+}
+
+/**
+ * Prepares agent data for update by ensuring all JSONb fields are properly
+ * merged with the existing agent data
+ *
+ * @param existingAgent The current agent data from the database
+ * @param updates The partial updates to be applied
+ * @returns A merged agent object ready for database update
+ */
+export function prepareAgentUpdate<T>(existingAgent: T, updates: Partial<T>): T {
+  return deepMerge(existingAgent, updates);
+}

packages/plugin-sql/src/base.ts

@@ -247,27 +247,112 @@ export abstract class BaseDrizzleAdapter<
     });
   }
 
+  /**
+   * Validates the agent update request
+   * @param agentId The ID of the agent to update
+   * @param agent The agent data to validate
+   * @throws Error if validation fails
+   */
+  private validateAgentUpdate(agentId: UUID, agent: Partial<Agent>): void {
+    if (!agent.id) {
+      throw new Error('Agent ID is required for update');
+    }
+  }
+
+  /**
+   * Merges nested JSONb objects within the agent settings
+   * @param existingAgent The current agent data
+   * @param updates The updates to apply
+   * @returns Merged settings object
+   */
+  private mergeAgentSettings(existingAgent: Agent, updates: Partial<Agent>): Agent['settings'] {
+    if (!updates.settings || !existingAgent.settings) {
+      return updates.settings || existingAgent.settings;
+    }
+
+    const mergedSettings = {
+      ...existingAgent.settings,
+      ...updates.settings,
+    };
+
+    // Handle nested secrets within settings
+    if (updates.settings.secrets && existingAgent.settings.secrets) {
+      mergedSettings.secrets = {
+        ...existingAgent.settings.secrets,
+        ...updates.settings.secrets,
+      };
+    }
+
+    return mergedSettings;
+  }
+
+  /**
+   * Merges style-related fields, handling arrays appropriately
+   * @param existingAgent The current agent data
+   * @param updates The updates to apply
+   * @returns Merged style object
+   */
+  private mergeAgentStyle(existingAgent: Agent, updates: Partial<Agent>): Agent['style'] {
+    if (!updates.style) {
+      return existingAgent.style;
+    }
+
+    return {
+      ...existingAgent.style,
+      ...updates.style,
+    };
+  }
+
+  /**
+   * Merges array fields, replacing them entirely if provided
+   * @param existingAgent The current agent data
+   * @param updates The updates to apply
+   * @returns Object containing merged array fields
+   */
+  private mergeArrayFields(existingAgent: Agent, updates: Partial<Agent>): Partial<Agent> {
+    const mergedFields: Partial<Agent> = {};
+
+    // Handle array JSONb fields - these should be replaced entirely if provided
+    if (updates.plugins !== undefined) mergedFields.plugins = updates.plugins;
+    if (updates.bio !== undefined) mergedFields.bio = updates.bio;
+    if (updates.topics !== undefined) mergedFields.topics = updates.topics;
+    if (updates.adjectives !== undefined) mergedFields.adjectives = updates.adjectives;
+    if (updates.knowledge !== undefined) mergedFields.knowledge = updates.knowledge;
+
+    return mergedFields;
+  }
+
   /**
    * Updates an agent in the database with the provided agent ID and data.
+   * Properly handles merging of nested JSONb fields.
+   *
    * @param {UUID} agentId - The unique identifier of the agent to update.
    * @param {Partial<Agent>} agent - The partial agent object containing the fields to update.
    * @returns {Promise<boolean>} - A boolean indicating if the agent was successfully updated.
    */
   async updateAgent(agentId: UUID, agent: Partial<Agent>): Promise<boolean> {
     return this.withDatabase(async () => {
       try {
-        if (!agent.id) {
-          throw new Error('Agent ID is required for update');
+        this.validateAgentUpdate(agentId, agent);
+
+        // Get the existing agent to properly merge JSONb fields
+        const existingAgent = await this.getAgent(agentId);
+        if (!existingAgent) {
+          throw new Error(`Agent with ID ${agentId} not found`);
         }
 
+        // Merge all fields using helper functions
+        const mergedAgent: Partial<Agent> = {
+          ...existingAgent,
+          ...agent,
+          updatedAt: Date.now(),
+          settings: this.mergeAgentSettings(existingAgent, agent),
+          style: this.mergeAgentStyle(existingAgent, agent),
+          ...this.mergeArrayFields(existingAgent, agent),
+        };
+
         await this.db.transaction(async (tx) => {
-          await tx
-            .update(agentTable)
-            .set({
-              ...agent,
-              updatedAt: Date.now(),
-            })
-            .where(eq(agentTable.id, agentId));
+          await tx.update(agentTable).set(mergedAgent).where(eq(agentTable.id, agentId));
         });
 
         logger.debug('Agent updated successfully:', {