chore: ensure min req for agent start

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} />
           ),
         },
       ]}