@elizaos/client 1.5.5-alpha.10

package/src/context/ConnectionContext.tsx

@@ -0,0 +1,194 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
+import { useToast } from '@/hooks/use-toast';
+import SocketIOManager from '@/lib/socketio-manager';
+import { updateApiClientApiKey } from '@/lib/api-client-config';
+// Eliza client refresh functionality removed (not needed with direct client)
+
+export const connectionStatusActions = {
+  setUnauthorized: (message: string) => {
+    console.warn('setUnauthorized called before ConnectionContext is ready', message);
+  },
+  setOfflineStatus: (isOffline: boolean) => {
+    console.warn('setOfflineStatus called before ConnectionContext is ready', isOffline);
+  },
+};
+
+export type ConnectionStatusType =
+  | 'loading'
+  | 'connected'
+  | 'reconnecting'
+  | 'error'
+  | 'unauthorized';
+
+interface ConnectionContextType {
+  status: ConnectionStatusType;
+  error: string | null;
+  setUnauthorizedFromApi: (message: string) => void;
+  setOfflineStatusFromProvider: (isOffline: boolean) => void;
+  refreshApiClient: (newApiKey?: string | null) => void;
+}
+
+const ConnectionContext = createContext<ConnectionContextType | undefined>(undefined);
+
+export const ConnectionProvider = ({ children }: { children: ReactNode }) => {
+  const { toast } = useToast();
+  const [status, setStatus] = useState<ConnectionStatusType>('loading');
+  const [error, setError] = useState<string | null>(null);
+  const isFirstConnect = useRef(true);
+  const socketManager = SocketIOManager.getInstance();
+
+  const setUnauthorizedFromApi = useCallback(
+    (message: string) => {
+      setStatus('unauthorized');
+      setError(message);
+      toast({
+        title: 'Authorization Required',
+        description: message || 'Please provide a valid API Key.',
+        variant: 'destructive',
+      });
+    },
+    [toast]
+  );
+
+  const setOfflineStatusFromProvider = useCallback(
+    (isOffline: boolean) => {
+      if (isOffline) {
+        if (status !== 'error' && status !== 'unauthorized') {
+          setStatus('error');
+          setError('Network connection appears to be offline.');
+          toast({
+            title: 'Network Offline',
+            description: 'Please check your internet connection.',
+            variant: 'destructive',
+          });
+        }
+      } else {
+        if (status === 'error' && error?.includes('offline')) {
+        }
+      }
+    },
+    [status, error, toast]
+  );
+
+  const refreshApiClient = useCallback((newApiKey?: string | null) => {
+    try {
+      // Update localStorage if a new API key is provided
+      if (newApiKey !== undefined) {
+        updateApiClientApiKey(newApiKey);
+      }
+
+      // Refresh the ElizaClient instance with new configuration
+      // Client refresh not needed with direct client pattern
+
+      console.log('API client refreshed with new configuration');
+    } catch (error) {
+      console.error('Failed to refresh API client:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    connectionStatusActions.setUnauthorized = setUnauthorizedFromApi;
+    connectionStatusActions.setOfflineStatus = setOfflineStatusFromProvider;
+  }, [setUnauthorizedFromApi, setOfflineStatusFromProvider]);
+
+  useEffect(() => {
+    const onConnect = () => {
+      setStatus('connected');
+      setError(null);
+      if (connectionStatusActions.setOfflineStatus) {
+        connectionStatusActions.setOfflineStatus(false);
+      }
+
+      if (isFirstConnect.current) {
+        isFirstConnect.current = false;
+      } else {
+        toast({
+          title: 'Connection Restored',
+          description: 'Successfully reconnected to the Eliza server.',
+        });
+      }
+    };
+
+    const onDisconnect = (reason: string) => {
+      setStatus('error');
+      setError(`Connection lost: ${reason}`);
+      if (connectionStatusActions.setOfflineStatus) {
+        connectionStatusActions.setOfflineStatus(true);
+      }
+      toast({
+        title: 'Connection Lost',
+        description: 'Attempting to reconnect to the Eliza server…',
+        variant: 'destructive',
+      });
+    };
+
+    const onReconnectAttempt = () => {
+      setStatus('reconnecting');
+      setError('Reconnecting...');
+    };
+
+    const onConnectError = (err: Error) => {
+      setStatus('error');
+      setError(err.message);
+      if (connectionStatusActions.setOfflineStatus) {
+        connectionStatusActions.setOfflineStatus(true);
+      }
+    };
+
+    const onUnauthorized = (reason: string) => {
+      setStatus('unauthorized');
+      setError(`Unauthorized: ${reason}`);
+      toast({ title: 'Unauthorized', description: 'Please log in again.', variant: 'destructive' });
+    };
+
+    socketManager.on('connect', onConnect);
+    socketManager.on('disconnect', onDisconnect);
+    socketManager.on('reconnect', onConnect);
+    socketManager.on('reconnect_attempt', onReconnectAttempt);
+    socketManager.on('connect_error', onConnectError);
+    socketManager.on('unauthorized', onUnauthorized);
+
+    if (SocketIOManager.isConnected()) {
+      onConnect();
+    }
+
+    return () => {
+      socketManager.off('connect', onConnect);
+      socketManager.off('disconnect', onDisconnect);
+      socketManager.off('reconnect', onConnect);
+      socketManager.off('reconnect_attempt', onReconnectAttempt);
+      socketManager.off('connect_error', onConnectError);
+      socketManager.off('unauthorized', onUnauthorized);
+    };
+  }, [toast, socketManager, setOfflineStatusFromProvider]);
+
+  return (
+    <ConnectionContext.Provider
+      value={{
+        status,
+        error,
+        setUnauthorizedFromApi,
+        setOfflineStatusFromProvider,
+        refreshApiClient,
+      }}
+    >
+      {children}
+    </ConnectionContext.Provider>
+  );
+};
+
+export const useConnection = () => {
+  const ctx = useContext(ConnectionContext);
+  if (!ctx) {
+    throw new Error('useConnection must be inside ConnectionProvider');
+  }
+  return ctx;
+};

package/src/entry.tsx

@@ -0,0 +1,9 @@
+/**
+ * Entry point that ensures polyfills are loaded before anything else
+ * Use static imports so Vite HMR can properly track the graph.
+ */
+
+import './polyfills';
+import('./main');
+
+export {};

package/src/hooks/__tests__/use-agent-tab-state.test.ts

@@ -0,0 +1,137 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { mock, describe, it, expect, beforeEach } from 'bun:test';
+import { useAgentTabState } from '../use-agent-tab-state';
+
+// Mock clientLogger
+mock.module('../../lib/logger', () => ({
+  default: {
+    error: mock(),
+  },
+}));
+
+describe('useAgentTabState', () => {
+  beforeEach(() => {
+    // Clear localStorage before each test
+    localStorage.clear();
+  });
+
+  it('should initialize with details tab when no agentId is provided', () => {
+    const { result } = renderHook(() => useAgentTabState(undefined));
+
+    expect(result.current.currentTab).toBe('details');
+  });
+
+  it('should initialize with details tab for new agent', () => {
+    const agentId = '550e8400-e29b-41d4-a716-446655440000';
+    localStorage.setItem('eliza-agent-tab-states', '{}');
+
+    const { result } = renderHook(() => useAgentTabState(agentId));
+
+    expect(result.current.currentTab).toBe('details');
+  });
+
+  it('should load saved tab state for existing agent', async () => {
+    const agentId = '550e8400-e29b-41d4-a716-446655440000';
+    const savedStates = {
+      '550e8400-e29b-41d4-a716-446655440000': 'memories',
+    };
+    localStorage.setItem('eliza-agent-tab-states', JSON.stringify(savedStates));
+
+    const { result } = renderHook(() => useAgentTabState(agentId));
+
+    await waitFor(() => {
+      expect(result.current.currentTab).toBe('memories');
+    });
+  });
+
+  it('should save tab state when changed', async () => {
+    const agentId = '550e8400-e29b-41d4-a716-446655440000';
+    localStorage.setItem('eliza-agent-tab-states', '{}');
+
+    const { result } = renderHook(() => useAgentTabState(agentId));
+
+    act(() => {
+      result.current.setTab('actions');
+    });
+
+    await waitFor(() => {
+      expect(result.current.currentTab).toBe('actions');
+    });
+
+    expect(localStorage.getItem('eliza-agent-tab-states')).toBe(
+      JSON.stringify({ '550e8400-e29b-41d4-a716-446655440000': 'actions' })
+    );
+  });
+
+  it('should preserve other agent states when updating', () => {
+    const agentId = '550e8400-e29b-41d4-a716-446655440001';
+    const existingStates = {
+      '550e8400-e29b-41d4-a716-446655440000': 'memories',
+    };
+    localStorage.setItem('eliza-agent-tab-states', JSON.stringify(existingStates));
+
+    const { result } = renderHook(() => useAgentTabState(agentId));
+
+    act(() => {
+      result.current.setTab('logs');
+    });
+
+    expect(localStorage.getItem('eliza-agent-tab-states')).toBe(
+      JSON.stringify({
+        '550e8400-e29b-41d4-a716-446655440000': 'memories',
+        '550e8400-e29b-41d4-a716-446655440001': 'logs',
+      })
+    );
+  });
+
+  it('should handle localStorage errors gracefully', () => {
+    const agentId = '550e8400-e29b-41d4-a716-446655440000';
+    const originalGetItem = localStorage.getItem;
+    localStorage.getItem = () => {
+      throw new Error('localStorage not available');
+    };
+
+    const { result } = renderHook(() => useAgentTabState(agentId));
+
+    expect(result.current.currentTab).toBe('details');
+
+    // Restore original getItem
+    localStorage.getItem = originalGetItem;
+  });
+
+  it('should switch tab state when agentId changes', async () => {
+    const savedStates = {
+      '550e8400-e29b-41d4-a716-446655440000': 'memories',
+      '550e8400-e29b-41d4-a716-446655440001': 'actions',
+    };
+    localStorage.setItem('eliza-agent-tab-states', JSON.stringify(savedStates));
+
+    const { result, rerender } = renderHook(({ agentId }) => useAgentTabState(agentId), {
+      initialProps: { agentId: '550e8400-e29b-41d4-a716-446655440000' as any },
+    });
+
+    await waitFor(() => {
+      expect(result.current.currentTab).toBe('memories');
+    });
+
+    rerender({ agentId: '550e8400-e29b-41d4-a716-446655440001' as any });
+
+    await waitFor(() => {
+      expect(result.current.currentTab).toBe('actions');
+    });
+  });
+
+  it('should not save to localStorage when no agentId is provided', async () => {
+    const { result } = renderHook(() => useAgentTabState(undefined));
+
+    act(() => {
+      result.current.setTab('actions');
+    });
+
+    await waitFor(() => {
+      expect(result.current.currentTab).toBe('actions');
+    });
+
+    expect(localStorage.getItem('eliza-agent-tab-states')).toBe(null);
+  });
+});

package/src/hooks/__tests__/use-agent-update.test.tsx

@@ -0,0 +1,250 @@
+import { useAgentUpdate } from '../use-agent-update';
+import { describe, test, expect, mock, beforeEach, afterEach } from 'bun:test';
+import { renderHook } from '@testing-library/react';
+
+// Mock the usePartialUpdate hook instead of React core hooks
+mock.module('../use-partial-update', () => ({
+  usePartialUpdate: (initialValue: any) => {
+    let currentValue = { ...initialValue };
+
+    const updateFieldMock = mock((path: string, value: any) => {
+      // Simple implementation to track updates
+      const pathParts = path.split('.');
+
+      if (pathParts.length === 1) {
+        currentValue[path] = value;
+      } else {
+        // Handle nested paths (simplified)
+        const [first, ...rest] = pathParts;
+        if (!currentValue[first]) currentValue[first] = {};
+
+        // Very simple implementation - doesn't handle complex nested paths
+        let target = currentValue[first];
+        for (let i = 0; i < rest.length - 1; i++) {
+          if (!target[rest[i]]) target[rest[i]] = {};
+          target = target[rest[i]];
+        }
+        target[rest[rest.length - 1]] = value;
+      }
+    });
+
+    const addArrayItemMock = mock((path: string, item: any) => {
+      const pathParts = path.split('.');
+      if (pathParts.length === 1) {
+        if (!Array.isArray(currentValue[path])) {
+          currentValue[path] = [];
+        }
+        currentValue[path].push(item);
+      }
+    });
+
+    const removeArrayItemMock = mock();
+    const resetMock = mock();
+
+    const updateSettingsMock = mock((settings: any) => {
+      currentValue.settings = { ...currentValue.settings, ...settings };
+    });
+
+    return {
+      value: currentValue,
+      updateField: updateFieldMock,
+      addArrayItem: addArrayItemMock,
+      removeArrayItem: removeArrayItemMock,
+      reset: resetMock,
+      updateSettings: updateSettingsMock,
+    };
+  },
+}));
+
+// Define a simplified Agent type for our tests
+type MockAgent = {
+  name: string;
+  username: string;
+  system: string;
+  bio: string[];
+  topics: string[];
+  adjectives: string[];
+  plugins: string[];
+  style: {
+    all: string[];
+    chat: string[];
+    post: string[];
+  };
+  settings: {
+    avatar?: string;
+    voice?: {
+      model?: string;
+      settings?: Record<string, any>;
+    };
+    secrets?: Record<string, string>;
+    [key: string]: any;
+  };
+  [key: string]: any;
+};
+
+describe('useAgentUpdate hook', () => {
+  beforeEach(() => {
+    // Clear all mocks before each test
+    mock.restore();
+  });
+
+  afterEach(() => {
+    // Clean up after each test
+    mock.restore();
+  });
+
+  test('importAgent should call the appropriate update functions for all template fields', () => {
+    // Create initial and template agents
+    const initialAgent: MockAgent = {
+      name: 'Initial Agent',
+      username: 'initial_agent',
+      system: 'Initial system prompt',
+      bio: ['Initial bio'],
+      topics: ['Initial topic'],
+      adjectives: ['Initial adjective'],
+      plugins: ['initial-plugin'],
+      style: {
+        all: ['Initial style all'],
+        chat: ['Initial style chat'],
+        post: ['Initial style post'],
+      },
+      settings: {
+        avatar: 'initial-avatar.png',
+        voice: {
+          model: 'initial-voice-model',
+        },
+        secrets: {
+          INITIAL_API_KEY: 'initial-key-value',
+        },
+      },
+    };
+
+    const templateAgent: MockAgent = {
+      name: 'Template Agent',
+      username: 'template_agent',
+      system: 'Template system prompt',
+      bio: ['Template bio 1', 'Template bio 2'],
+      topics: ['Template topic 1', 'Template topic 2'],
+      adjectives: ['Template adjective 1', 'Template adjective 2'],
+      plugins: ['template-plugin-1', 'template-plugin-2'],
+      style: {
+        all: ['Template style all 1', 'Template style all 2'],
+        chat: ['Template style chat 1', 'Template style chat 2'],
+        post: ['Template style post 1', 'Template style post 2'],
+      },
+      settings: {
+        avatar: 'template-avatar.png',
+        voice: {
+          model: 'template-voice-model',
+        },
+        secrets: {
+          TEMPLATE_API_KEY: 'template-key-value',
+        },
+        newSetting: 'new-template-value',
+      },
+      extraField: 'extra-field-value',
+    };
+
+    // Use renderHook to properly test the React hook
+    const { result } = renderHook(() => useAgentUpdate(initialAgent as any));
+
+    // Get the necessary functions
+    const { updateField, updateSettings } = result.current;
+
+    // Call importAgent
+    result.current.importAgent(templateAgent as any);
+
+    // Verify that updateField or updateSettings was called for each field in the template
+
+    // Check basic scalar fields
+    expect(updateField).toHaveBeenCalledWith('name', templateAgent.name);
+    expect(updateField).toHaveBeenCalledWith('username', templateAgent.username);
+    expect(updateField).toHaveBeenCalledWith('system', templateAgent.system);
+
+    // Check array fields
+    expect(updateField).toHaveBeenCalledWith('bio', templateAgent.bio);
+    expect(updateField).toHaveBeenCalledWith('topics', templateAgent.topics);
+    expect(updateField).toHaveBeenCalledWith('adjectives', templateAgent.adjectives);
+    expect(updateField).toHaveBeenCalledWith('plugins', templateAgent.plugins);
+
+    // Check style fields
+    expect(updateField).toHaveBeenCalledWith('style', {
+      all: templateAgent.style.all,
+      chat: templateAgent.style.chat,
+      post: templateAgent.style.post,
+    });
+
+    // Check settings
+    expect(updateSettings).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...initialAgent.settings,
+        ...templateAgent.settings,
+      })
+    );
+
+    // Check extra fields
+    expect(updateField).toHaveBeenCalledWith('extraField', templateAgent.extraField);
+  });
+
+  test('importAgent should handle custom fields and nested objects', () => {
+    // Create initial and template agents with complex nested structures
+    const initialAgent: MockAgent = {
+      name: 'Initial',
+      username: 'initial',
+      system: 'Initial',
+      bio: [],
+      topics: [],
+      adjectives: [],
+      plugins: [],
+      style: { all: [], chat: [], post: [] },
+      settings: {
+        complexObject: {
+          level1: {
+            value: 'initial',
+          },
+        },
+      },
+    };
+
+    const templateAgent: MockAgent = {
+      name: 'Template',
+      username: 'template',
+      system: 'Template',
+      bio: [],
+      topics: [],
+      adjectives: [],
+      plugins: [],
+      style: { all: [], chat: [], post: [] },
+      settings: {
+        complexObject: {
+          level1: {
+            value: 'template',
+            newField: 'new',
+          },
+          level2: 'new level',
+        },
+      },
+      customField: 'custom value',
+    };
+
+    // Use renderHook to properly test the React hook
+    const { result } = renderHook(() => useAgentUpdate(initialAgent as any));
+
+    // Get the necessary functions
+    const { updateField, updateSettings } = result.current;
+
+    // Call importAgent
+    result.current.importAgent(templateAgent as any);
+
+    // Verify updateSettings was called with the complex nested object
+    expect(updateSettings).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...initialAgent.settings,
+        ...templateAgent.settings,
+      })
+    );
+
+    // Verify custom field was updated
+    expect(updateField).toHaveBeenCalledWith('customField', templateAgent.customField);
+  });
+});

package/src/hooks/__tests__/use-character-convert.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect, mock } from 'bun:test';
+import { useConvertCharacter } from '../use-character-convert';
+
+// Mock the usePlugins hook
+const mockUsePlugins = mock();
+
+mock.module('../use-plugins', () => ({
+  usePlugins: mockUsePlugins,
+}));
+
+describe('useConvertCharacter', () => {
+  it('should only include plugins that exist in availablePlugins', () => {
+    // Set up mock return value
+    mockUsePlugins.mockImplementation(() => ({
+      data: ['@elizaos/plugin-sql', '@elizaos/plugin-bootstrap', '@elizaos/plugin-discord'],
+    }));
+
+    const { convertCharacter } = useConvertCharacter();
+
+    const v1Character = {
+      name: 'Test Character',
+      clients: ['discord'],
+      modelProvider: 'google',
+      bio: ['Test bio'],
+    };
+
+    const result = convertCharacter(v1Character);
+
+    // Should only include plugins that exist in availablePlugins
+    expect(result.plugins).toEqual([
+      '@elizaos/plugin-bootstrap',
+      '@elizaos/plugin-discord',
+      '@elizaos/plugin-sql',
+    ]);
+  });
+
+  it('should not include non-existent plugins', () => {
+    // Set up mock return value with limited set
+    mockUsePlugins.mockImplementation(() => ({
+      data: ['@elizaos/plugin-sql'], // Only sql plugin available
+    }));
+
+    const { convertCharacter } = useConvertCharacter();
+
+    const v1Character = {
+      name: 'Test Character',
+      clients: ['discord', 'slack'], // These plugins don't exist
+      modelProvider: 'openai', // This plugin doesn't exist
+      bio: ['Test bio'],
+    };
+
+    const result = convertCharacter(v1Character);
+
+    // Should only include plugins that actually exist
+    expect(result.plugins).toEqual(['@elizaos/plugin-sql']);
+    expect(result.plugins).not.toContain('@elizaos/plugin-discord');
+    expect(result.plugins).not.toContain('@elizaos/plugin-slack');
+    expect(result.plugins).not.toContain('@elizaos/plugin-openai');
+  });
+
+  it('should handle empty availablePlugins gracefully', () => {
+    // Set up mock return value with empty array
+    mockUsePlugins.mockImplementation(() => ({
+      data: [],
+    }));
+
+    const { convertCharacter } = useConvertCharacter();
+
+    const v1Character = {
+      name: 'Test Character',
+      clients: ['discord'],
+      modelProvider: 'google',
+      bio: ['Test bio'],
+    };
+
+    const result = convertCharacter(v1Character);
+
+    // Should return empty plugins array when no plugins are available
+    expect(result.plugins).toEqual([]);
+  });
+
+  it('should handle mapped plugins correctly', () => {
+    // Set up mock return value including mapped ones
+    mockUsePlugins.mockImplementation(() => ({
+      data: ['@elizaos/plugin-google-genai', '@elizaos/plugin-sql'],
+    }));
+
+    const { convertCharacter } = useConvertCharacter();
+
+    const v1Character = {
+      name: 'Test Character',
+      modelProvider: 'google', // This should map to @elizaos/plugin-google-genai
+      bio: ['Test bio'],
+    };
+
+    const result = convertCharacter(v1Character);
+
+    // Should include the mapped plugin
+    expect(result.plugins).toContain('@elizaos/plugin-google-genai');
+    expect(result.plugins).toContain('@elizaos/plugin-sql');
+  });
+});