@elizaos/client 1.5.5-alpha.10

package/src/components/agent-avatar-stack.tsx

@@ -0,0 +1,121 @@
+import { UUID } from '@elizaos/core';
+import { Avatar, AvatarImage } from './ui/avatar';
+import { formatAgentName } from '@/lib/utils';
+import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+interface AgentAvatarStackProps {
+  agentIds: UUID[];
+  agentNames: string[];
+  agentAvatars: Record<string, string | null>;
+  size?: 'sm' | 'md' | 'lg';
+  maxStack?: number;
+  showExtraTooltip?: boolean;
+}
+
+export default function AgentAvatarStack({
+  agentIds,
+  agentNames,
+  agentAvatars,
+  size = 'md',
+  maxStack = 2,
+  showExtraTooltip = false,
+}: AgentAvatarStackProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const displayAgents = agentIds.slice(0, maxStack);
+  const isMultiple = displayAgents.length > 1;
+  const hiddenCount = agentIds.length - maxStack;
+  const showExtra = showExtraTooltip && agentIds.length > maxStack;
+
+  const baseSize = size === 'sm' ? 24 : size === 'lg' ? 40 : 32;
+  const avatarSizeClass = isMultiple
+    ? size === 'sm'
+      ? 'size-6'
+      : size === 'lg'
+        ? 'size-10'
+        : 'size-8'
+    : size === 'sm'
+      ? 'size-6'
+      : size === 'lg'
+        ? 'size-10'
+        : 'size-8';
+
+  const visibleCount = showExtra ? maxStack + 1 : maxStack;
+  const overlapFactor = showExtraTooltip ? 1 : 0.6;
+  const avatarOffset = Math.floor(baseSize * (overlapFactor / visibleCount));
+
+  const getAvatarContent = (agentId: UUID, index: number) => {
+    const avatarSrc = agentAvatars[agentId] || '/elizaos-icon.png';
+    return agentAvatars[agentId] ? (
+      <AvatarImage src={avatarSrc} alt="Agent avatar" />
+    ) : (
+      <div className="rounded-full bg-gray-600 w-full h-full flex-shrink-0 flex items-center justify-center">
+        {formatAgentName(agentNames[index])}
+      </div>
+    );
+  };
+
+  const handleMouseEnter = (index: number) => {
+    if (showExtraTooltip) {
+      setHoveredIndex(index);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredIndex(null);
+  };
+
+  return (
+    <div
+      className="relative flex items-center text-xs"
+      style={{ height: baseSize, width: baseSize }}
+    >
+      {displayAgents.length === 1 ? (
+        <Avatar className={`${avatarSizeClass} rounded-full overflow-hidden`}>
+          {getAvatarContent(displayAgents[0], 0)}
+        </Avatar>
+      ) : (
+        <>
+          {displayAgents.map((agentId, index) => (
+            <Avatar
+              onMouseEnter={() => handleMouseEnter(index)}
+              onMouseLeave={() => handleMouseLeave()}
+              key={agentId}
+              className={`${avatarSizeClass} rounded-full overflow-hidden absolute border border-2 border-card`}
+              style={{
+                zIndex: hoveredIndex === index ? agentIds.length + 1 : index,
+                left: `${(index - (visibleCount - 1) / 2) * avatarOffset}px`,
+                top: `${(index - (visibleCount - 1) / 2) * avatarOffset}px`,
+              }}
+            >
+              {getAvatarContent(agentId, index)}
+            </Avatar>
+          ))}
+          {showExtra && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={`${avatarSizeClass} rounded-full bg-gray-500 text-foreground/60 flex items-center justify-center absolute border border-2 border-card`}
+                  style={{
+                    zIndex: displayAgents.length,
+                    left: `${(displayAgents.length - (visibleCount - 1) / 2) * avatarOffset}px`,
+                    top: `${(displayAgents.length - (visibleCount - 1) / 2) * avatarOffset}px`,
+                  }}
+                >
+                  +{hiddenCount}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <div className="flex flex-col">
+                  {agentNames.slice(maxStack).map((name, index) => (
+                    <span key={index}>{name}</span>
+                  ))}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/agent-card.cy.tsx

@@ -0,0 +1,259 @@
+/// <reference types="cypress" />
+/// <reference path="../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import type { AgentWithStatus } from '@/types';
+import { AgentStatus } from '@elizaos/core';
+
+// Create a minimal test component that represents AgentCard functionality
+const TestAgentCard: React.FC<{
+  agent: Partial<AgentWithStatus>;
+  onChat: (agent: Partial<AgentWithStatus>) => void;
+}> = ({ agent, onChat }) => {
+  if (!agent || !agent.id) {
+    return <div data-testid="agent-card-error">Agent data not available.</div>;
+  }
+
+  const agentName = agent.name || 'Unnamed Agent';
+  const isActive = agent.status === AgentStatus.ACTIVE;
+
+  return (
+    <div data-testid="agent-card" className="agent-card">
+      <div data-testid="agent-name">{agentName}</div>
+      <div
+        data-testid="status-indicator"
+        className={`status-dot ${isActive ? 'active' : 'inactive'}`}
+      />
+      <div data-testid="agent-status">
+        {agent.status === AgentStatus.ACTIVE
+          ? 'active'
+          : agent.status === AgentStatus.INACTIVE
+            ? 'inactive'
+            : 'unknown'}
+      </div>
+      {agent.settings?.avatar && (
+        <img
+          data-testid="agent-avatar"
+          src={
+            typeof agent.settings.avatar === 'string' ? agent.settings.avatar : '/elizaos-icon.png'
+          }
+          alt={agentName}
+        />
+      )}
+      {!agent.settings?.avatar && (
+        <div data-testid="agent-initials">{agentName.substring(0, 2).toUpperCase()}</div>
+      )}
+      {isActive ? (
+        <button data-testid="chat-button" onClick={() => onChat(agent)}>
+          Chat
+        </button>
+      ) : (
+        <button data-testid="start-button">Start</button>
+      )}
+      <button data-testid="card-button" onClick={() => onChat(agent)} className="card-clickable">
+        Card Click
+      </button>
+    </div>
+  );
+};
+
+describe('AgentCard Component', () => {
+  const mockAgent: Partial<AgentWithStatus> = {
+    id: '12345678-1234-1234-1234-123456789012',
+    name: 'Test Agent',
+    username: 'testagent',
+    status: AgentStatus.INACTIVE,
+    settings: {
+      avatar: 'https://example.com/avatar.png',
+    },
+    bio: 'Test agent bio',
+    enabled: true,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  };
+
+  const activeAgent: Partial<AgentWithStatus> = {
+    ...mockAgent,
+    status: AgentStatus.ACTIVE,
+  };
+
+  it('renders agent information correctly', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Check agent name is displayed
+    cy.get('[data-testid="agent-name"]').should('contain.text', 'Test Agent');
+
+    // Check status indicator exists
+    cy.get('[data-testid="status-indicator"]').should('exist');
+
+    // Check agent card exists
+    cy.get('[data-testid="agent-card"]').should('exist');
+  });
+
+  it('displays active agent correctly', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={activeAgent} onChat={onChat} />);
+
+    // Status should show active
+    cy.get('[data-testid="agent-status"]').should('contain.text', 'active');
+
+    // Chat button should be visible
+    cy.get('[data-testid="chat-button"]').should('exist');
+  });
+
+  it('handles missing agent data gracefully', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={{}} onChat={onChat} />);
+
+    // Should show error message
+    cy.get('[data-testid="agent-card-error"]').should('contain.text', 'Agent data not available');
+  });
+
+  it('shows start button for inactive agents', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Start button should be visible
+    cy.get('[data-testid="start-button"]').should('contain.text', 'Start');
+  });
+
+  it('shows chat button for active agents', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={activeAgent} onChat={onChat} />);
+
+    // Chat button should be visible
+    cy.get('[data-testid="chat-button"]').should('contain.text', 'Chat');
+  });
+
+  it('handles chat button click for active agents', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={activeAgent} onChat={onChat} />);
+
+    // Click chat button
+    cy.get('[data-testid="chat-button"]').click();
+
+    // Verify onChat was called
+    cy.wrap(onChat).should('have.been.calledWith', activeAgent);
+  });
+
+  it('navigates when card is clicked', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Click the card button
+    cy.get('[data-testid="card-button"]').click();
+
+    // Verify onChat was called
+    cy.wrap(onChat).should('have.been.calledWith', mockAgent);
+  });
+
+  it('shows agent avatar when provided', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Should show avatar
+    cy.get('[data-testid="agent-avatar"]').should('exist');
+    cy.get('[data-testid="agent-avatar"]').should(
+      'have.attr',
+      'src',
+      'https://example.com/avatar.png'
+    );
+  });
+
+  it('shows initials fallback when no avatar', () => {
+    const onChat = cy.stub();
+    const agentWithoutAvatar = {
+      ...mockAgent,
+      settings: {},
+    };
+
+    cy.mount(<TestAgentCard agent={agentWithoutAvatar} onChat={onChat} />);
+
+    // Should show initials fallback
+    cy.get('[data-testid="agent-initials"]').should('contain.text', 'TE');
+  });
+
+  it('displays agent status correctly', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Check status is displayed
+    cy.get('[data-testid="agent-status"]').should('contain.text', 'inactive');
+  });
+
+  it('handles different button states', () => {
+    const onChat = cy.stub();
+
+    // Test inactive agent - should show start button
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+    cy.get('[data-testid="start-button"]').should('exist');
+
+    // Test active agent - should show chat button
+    cy.mount(<TestAgentCard agent={activeAgent} onChat={onChat} />);
+    cy.get('[data-testid="chat-button"]').should('exist');
+  });
+
+  it('handles long agent names', () => {
+    const onChat = cy.stub();
+    const longNameAgent = {
+      ...mockAgent,
+      name: 'This is a very long agent name that should be displayed',
+    };
+
+    cy.mount(<TestAgentCard agent={longNameAgent} onChat={onChat} />);
+
+    // Check that name is displayed
+    cy.get('[data-testid="agent-name"]').should('contain.text', 'This is a very long agent name');
+  });
+
+  it('renders with proper structure', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={mockAgent} onChat={onChat} />);
+
+    // Check basic structure elements exist
+    cy.get('[data-testid="agent-card"]').should('exist');
+    cy.get('[data-testid="agent-name"]').should('exist');
+    cy.get('[data-testid="status-indicator"]').should('exist');
+    cy.get('[data-testid="agent-status"]').should('exist');
+  });
+
+  it('handles button interactions', () => {
+    const onChat = cy.stub();
+
+    cy.mount(<TestAgentCard agent={activeAgent} onChat={onChat} />);
+
+    // Click chat button
+    cy.get('[data-testid="chat-button"]').click();
+    cy.wrap(onChat).should('have.been.calledWith', activeAgent);
+
+    // Click card button
+    cy.get('[data-testid="card-button"]').click();
+    cy.wrap(onChat).should('have.been.calledWith', activeAgent);
+  });
+
+  it('shows appropriate content for different agent states', () => {
+    const onChat = cy.stub();
+
+    // Test with different agent configurations
+    const testCases = [
+      { agent: mockAgent, expectedButton: 'start-button' },
+      { agent: activeAgent, expectedButton: 'chat-button' },
+    ];
+
+    testCases.forEach(({ agent, expectedButton }) => {
+      cy.mount(<TestAgentCard agent={agent} onChat={onChat} />);
+      cy.get(`[data-testid="${expectedButton}"]`).should('exist');
+    });
+  });
+});

package/src/components/agent-card.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { Switch } from '@/components/ui/switch';
+import { formatAgentName, cn, getAgentAvatar } from '@/lib/utils';
+import type { Agent } from '@elizaos/core';
+import { AgentStatus as CoreAgentStatus } from '@elizaos/core';
+import { Settings } from 'lucide-react';
+import { useAgentManagement } from '@/hooks/use-agent-management';
+import type { AgentWithStatus } from '@/types';
+import clientLogger from '@/lib/logger';
+
+interface AgentCardProps {
+  agent: Partial<AgentWithStatus>;
+  onChat: (forceNew: boolean) => void;
+}
+
+const AgentCard: React.FC<AgentCardProps> = ({ agent, onChat }) => {
+  const navigate = useNavigate();
+  const { startAgent, stopAgent, isAgentStarting, isAgentStopping } = useAgentManagement();
+
+  if (!agent || !agent.id) {
+    clientLogger.error('[AgentCard] Agent data or ID is missing', { agent });
+    return (
+      <Card className="p-4 min-h-[100px] flex items-center justify-center text-muted-foreground">
+        Agent data not available.
+      </Card>
+    );
+  }
+
+  const agentIdForNav = agent.id;
+  const agentName = agent.name || 'Unnamed Agent';
+
+  const description = Array.isArray(agent.bio)
+    ? agent.bio.filter(Boolean).join(' ').trim()
+    : (typeof agent.bio === 'string' && agent.bio.trim()) ||
+      'Engages with all types of questions and conversations';
+  const isActive = agent.status === CoreAgentStatus.ACTIVE;
+  const isStarting = isAgentStarting(agent.id);
+  const isStopping = isAgentStopping(agent.id);
+
+  const agentForMutation: Agent = {
+    id: agent.id!,
+    name: agentName,
+    username: agent.username || agentName,
+    bio: agent.bio || '',
+    messageExamples: agent.messageExamples || [],
+    postExamples: agent.postExamples || [],
+    topics: agent.topics || [],
+    adjectives: agent.adjectives || [],
+    knowledge: agent.knowledge || [],
+    plugins: agent.plugins || [],
+    settings: agent.settings || {},
+    secrets: agent.secrets || {},
+    style: agent.style || {},
+    system: agent.system || undefined,
+    templates: agent.templates || {},
+    enabled: typeof agent.enabled === 'boolean' ? agent.enabled : true,
+    status: agent.status || CoreAgentStatus.INACTIVE,
+    createdAt: typeof agent.createdAt === 'number' ? agent.createdAt : Date.now(),
+    updatedAt: typeof agent.updatedAt === 'number' ? agent.updatedAt : Date.now(),
+  };
+
+  const handleStart = () => {
+    startAgent(agentForMutation);
+  };
+
+  const handleStop = () => {
+    stopAgent(agentForMutation);
+  };
+
+  const handleNewChat = (forceNew: boolean = false) => {
+    onChat(forceNew);
+  };
+
+  const handleSettings = () => {
+    navigate(`/settings/${agentIdForNav}`);
+  };
+
+  const handleToggle = () => {
+    if (isActive) {
+      handleStop();
+    } else {
+      handleStart();
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        'w-full transition-all bg-card border border-border/50 rounded-sm hover:bg-card/50 cursor-pointer',
+        isActive ? '' : 'opacity-75'
+      )}
+      data-testid="agent-card"
+      onClick={(e) => {
+        e.stopPropagation();
+        handleNewChat();
+      }}
+    >
+      <CardContent className="p-0 relative h-full">
+        {/* Toggle Switch - positioned absolutely in top-right */}
+        <div className="absolute top-3 right-3">
+          <Switch
+            checked={isActive}
+            onCheckedChange={(checked) => {
+              if (checked !== isActive) {
+                handleToggle();
+              }
+            }}
+            onClick={(e) => e.stopPropagation()}
+            aria-label={`Toggle ${agentName}`}
+            disabled={isStarting || isStopping}
+            className={cn(
+              isActive
+                ? 'data-[state=checked]:!bg-green-600'
+                : 'data-[state=unchecked]:!bg-gray-500/80'
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col justify-between h-full">
+          <div className="flex items-center gap-4 p-2 h-[90%]">
+            {/* Avatar */}
+            <Avatar className="h-16 w-16 flex-shrink-0 rounded-sm">
+              <AvatarImage src={getAgentAvatar(agent)} alt={agentName} />
+              <AvatarFallback className="text-lg font-medium rounded-sm">
+                {formatAgentName(agentName)}
+              </AvatarFallback>
+            </Avatar>
+
+            {/* Content - Name and Description */}
+            <div className="flex-1 min-w-0">
+              <h3 className="font-semibold text-xl mb-1 truncate" title={agentName}>
+                {agentName}
+              </h3>
+              <p className="text-sm text-muted-foreground line-clamp-2 leading-relaxed">
+                {description}
+              </p>
+            </div>
+          </div>
+          <div className="border-t border-muted" />
+          <div className="flex items-center justify-between py-1 px-2">
+            {/* Settings button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleSettings();
+              }}
+              className="h-8 w-8 p-0 hover:bg-muted/50 cursor-pointer"
+            >
+              <Settings className="h-4 w-4 text-muted-foreground" />
+            </Button>
+
+            {/* New Chat button - ghost variant */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleNewChat(true);
+              }}
+              className="h-8 px-2 rounded-sm bg-muted hover:bg-muted/50 cursor-pointer"
+            >
+              New Chat
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AgentCard;

package/src/components/agent-creator.tsx

@@ -0,0 +1,142 @@
+import CharacterForm from '@/components/character-form';
+import { useToast } from '@/hooks/use-toast';
+import { createElizaClient } from '@/lib/api-client-config';
+import type { Agent } from '@elizaos/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AvatarPanel from './avatar-panel';
+import PluginsPanel from './plugins-panel';
+import { SecretPanel, type SecretPanelRef } from './secret-panel';
+import { useAgentUpdate } from '@/hooks/use-agent-update';
+import { getTemplateById } from '@/config/agent-templates';
+
+// Define a partial agent for initialization from the "none" template
+const defaultCharacter: Partial<Agent> = getTemplateById('none')?.template || {
+  name: '',
+  username: '',
+  system: '',
+  bio: [] as string[],
+  topics: [] as string[],
+  adjectives: [] as string[],
+  plugins: ['@elizaos/plugin-sql', '@elizaos/plugin-openai', '@elizaos/plugin-bootstrap'],
+  settings: { secrets: {} },
+};
+
+export default function AgentCreator() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [initialCharacter] = useState<Partial<Agent>>({
+    ...defaultCharacter,
+  });
+  const secretPanelRef = useRef<SecretPanelRef>(null);
+  const [currentSecrets, setCurrentSecrets] = useState<Record<string, string | null>>({});
+
+  // Use agent update hook for proper handling of nested fields
+  const agentState = useAgentUpdate(initialCharacter as Agent);
+
+  const ensureRequiredFields = (character: Agent): Agent => {
+    return {
+      ...character,
+      bio: character.bio ?? [],
+      messageExamples: character.messageExamples ?? [],
+      postExamples: character.postExamples ?? [],
+      topics: character.topics ?? [],
+      adjectives: character.adjectives ?? [],
+      plugins: character.plugins ?? [],
+      style: {
+        all: character.style?.all ?? [],
+        chat: character.style?.chat ?? [],
+        post: character.style?.post ?? [],
+      },
+      settings: character.settings ?? { secrets: {} },
+    };
+  };
+
+  const handleSubmit = async (character: Agent) => {
+    try {
+      const completeCharacter = ensureRequiredFields(character);
+
+      // Get secrets from state (or ref as fallback)
+      const secrets = currentSecrets || secretPanelRef.current?.getSecrets() || {};
+      if (secrets && Object.keys(secrets).length > 0) {
+        // Add secrets to the character settings
+        completeCharacter.settings = {
+          ...completeCharacter.settings,
+          secrets,
+        };
+      }
+
+      const elizaClient = createElizaClient();
+      await elizaClient.agents.createAgent({ agent: completeCharacter });
+
+      // Invalidate the characters query to refresh the characters list
+      queryClient.invalidateQueries({ queryKey: ['characters'] });
+
+      toast({
+        title: 'Success',
+        description: 'Agent created successfully!',
+      });
+      queryClient.invalidateQueries({ queryKey: ['agents'] });
+      navigate('/');
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to create agent',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="h-full w-full">
+      <CharacterForm
+        characterValue={agentState.agent}
+        setCharacterValue={agentState}
+        title="Create Agent"
+        description="Configure your AI agent's behavior and capabilities."
+        onSubmit={handleSubmit}
+        onReset={() => {
+          agentState.reset();
+          setCurrentSecrets({});
+        }}
+        onDelete={() => {
+          navigate('/');
+        }}
+        onTemplateChange={() => {
+          setCurrentSecrets({});
+        }}
+        isAgent={true}
+        secretPanelRef={secretPanelRef}
+        customComponents={[
+          {
+            name: 'Plugins',
+            component: (
+              <PluginsPanel characterValue={agentState.agent} setCharacterValue={agentState} />
+            ),
+          },
+          {
+            name: 'Secret',
+            component: (
+              <SecretPanel
+                characterValue={agentState.agent}
+                ref={secretPanelRef}
+                onChange={(secrets) => {
+                  // Only update local state, don't update agent state to avoid circular updates
+                  setCurrentSecrets(secrets);
+                }}
+              />
+            ),
+          },
+          {
+            name: 'Avatar',
+            component: (
+              <AvatarPanel characterValue={agentState.agent} setCharacterValue={agentState} />
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+}