@elizaos/client 1.5.5-alpha.10

package/src/components/agent-settings.tsx

@@ -0,0 +1,270 @@
+import CharacterForm from '@/components/character-form';
+import { useAgentUpdate } from '@/hooks/use-agent-update';
+import { useAgentManagement } from '@/hooks/use-agent-management';
+import ConfirmationDialog from '@/components/confirmation-dialog';
+import { useConfirmation } from '@/hooks/use-confirmation';
+import { useToast } from '@/hooks/use-toast';
+import { createElizaClient } from '@/lib/api-client-config';
+import type { Agent, UUID } from '@elizaos/core';
+import { AgentStatus } 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 { useDeleteAgent } from '@/hooks/use-delete-agent';
+
+export default function AgentSettings({
+  agent,
+  agentId,
+  onSaveComplete,
+}: {
+  agent: Agent;
+  agentId: UUID;
+  onSaveComplete?: () => void;
+}) {
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { confirm, isOpen, onOpenChange, onConfirm, options } = useConfirmation();
+  const isActive = agent?.status === AgentStatus.ACTIVE;
+  const secretPanelRef = useRef<SecretPanelRef>(null);
+  const [currentSecrets, setCurrentSecrets] = useState<Record<string, string | null>>({});
+
+  const { handleDelete: handleDeleteAgent, isDeleting: isDeletingAgent } = useDeleteAgent(agent);
+
+  // Use our enhanced agent update hook for more intelligent handling of JSONb fields
+  const agentState = useAgentUpdate(agent);
+
+  // Use agent management hook for stop functionality
+  const { stopAgent, isAgentStopping } = useAgentManagement();
+
+  const handleStopAgent = async () => {
+    try {
+      await stopAgent(agent);
+      toast({
+        title: 'Success',
+        description: 'Agent stopped successfully',
+      });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to stop agent',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!agentId) {
+      toast({
+        title: 'Error',
+        description: 'Agent ID is missing',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Define the actual save logic
+    const performSave = async () => {
+      try {
+        const elizaClient = createElizaClient();
+        // Get secrets from state (or ref as fallback)
+        const secrets =
+          Object.keys(currentSecrets).length > 0
+            ? currentSecrets
+            : secretPanelRef.current?.getSecrets() || {};
+
+        // Get only the fields that have changed
+        const changedFields = agentState.getChangedFields();
+
+        // Manually add secrets to changedFields if they exist
+        if (secrets && Object.keys(secrets).length > 0) {
+          // Ensure settings object exists in changedFields
+          if (!changedFields.settings) {
+            changedFields.settings = {};
+          }
+
+          const activeSecrets = Object.entries(secrets)
+            .filter(([_, value]) => value !== null)
+            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+          // Add only active secrets to the settings (exclude deleted ones)
+          changedFields.settings.secrets = activeSecrets;
+        }
+
+        // No need to send update if nothing changed
+        if (Object.keys(changedFields).length === 0) {
+          const secrets = agentState.agent?.settings?.secrets;
+          // Force include secrets if they exist even if no other changes detected
+          if (secrets && Object.keys(secrets).length > 0) {
+            const forceUpdate = {
+              id: agentId,
+              settings: { secrets },
+            };
+
+            await elizaClient.agents.updateAgent(agentId, forceUpdate as Partial<Agent>);
+
+            queryClient.invalidateQueries({ queryKey: ['agent', agentId] });
+            queryClient.invalidateQueries({ queryKey: ['agents'] });
+
+            toast({
+              title: 'Success',
+              description: 'Agent secrets updated successfully',
+            });
+
+            if (onSaveComplete) {
+              onSaveComplete();
+            } else {
+              navigate('/');
+            }
+            return;
+          }
+
+          toast({
+            title: 'No Changes',
+            description: 'No changes were made to the agent',
+          });
+
+          if (onSaveComplete) {
+            onSaveComplete();
+          } else {
+            navigate('/');
+          }
+          return;
+        }
+
+        // Always include the ID
+        const partialUpdate = {
+          id: agentId,
+          ...changedFields,
+        };
+
+        // Send the partial update
+        await elizaClient.agents.updateAgent(agentId, partialUpdate as Agent);
+
+        // Invalidate both the agent query and the agents list
+        queryClient.invalidateQueries({ queryKey: ['agent', agentId] });
+        queryClient.invalidateQueries({ queryKey: ['agents'] });
+
+        toast({
+          title: 'Success',
+          description: 'Agent updated successfully',
+        });
+
+        // Call the onSaveComplete callback if provided, otherwise navigate
+        if (onSaveComplete) {
+          onSaveComplete();
+        } else {
+          navigate('/');
+        }
+      } catch (error) {
+        toast({
+          title: 'Error',
+          description: error instanceof Error ? error.message : 'Failed to update agent',
+          variant: 'destructive',
+        });
+        throw error;
+      }
+    };
+
+    // Validate required secrets if we have a secret panel ref
+    if (secretPanelRef?.current) {
+      const secretValidation = secretPanelRef.current.validateSecrets();
+      if (!secretValidation.isValid) {
+        // Show confirmation dialog for missing secrets
+        confirm(
+          {
+            title: 'Missing Required Secrets',
+            description: `The following required secrets are missing: ${secretValidation.missingSecrets.join(', ')}. Do you want to save anyway?`,
+            confirmText: 'Save Anyway',
+            cancelText: 'Cancel',
+            variant: 'destructive',
+          },
+          performSave
+        );
+        return; // Exit early - performSave will be called if user confirms
+      }
+    }
+
+    // If validation passes or no secret panel, proceed with save
+    await performSave();
+  };
+
+  const handleDelete = () => {
+    if (isDeletingAgent) return; // Prevent multiple clicks
+
+    confirm(
+      {
+        title: 'Delete Agent',
+        description: `Are you sure you want to delete the agent "${agent.name}"? This action cannot be undone.`,
+        confirmText: 'Delete',
+        variant: 'destructive',
+      },
+      handleDeleteAgent
+    );
+  };
+
+  return (
+    <>
+      <CharacterForm
+        characterValue={agentState.agent}
+        setCharacterValue={agentState}
+        title="Agent Settings"
+        description="Configure your AI agent's behaviour and capabilities."
+        onSubmit={handleSubmit}
+        onReset={agentState.reset}
+        onDelete={handleDelete}
+        onStopAgent={isActive ? handleStopAgent : undefined}
+        isAgent={true}
+        isDeleting={isDeletingAgent}
+        isStopping={isAgentStopping(agentId)}
+        customComponents={[
+          {
+            name: 'Plugins',
+            component: (
+              <PluginsPanel
+                characterValue={agentState.agent}
+                setCharacterValue={agentState}
+                initialPlugins={agent.plugins}
+              />
+            ),
+          },
+          {
+            name: 'Secret',
+            component: (
+              <SecretPanel
+                characterValue={agentState.agent}
+                ref={secretPanelRef}
+                onChange={(secrets) => {
+                  setCurrentSecrets(secrets);
+                  // Also update the agent state so changes persist across tab switches
+                  agentState.updateSettings({ secrets });
+                }}
+              />
+            ),
+          },
+          {
+            name: 'Avatar',
+            component: (
+              <AvatarPanel characterValue={agentState.agent} setCharacterValue={agentState} />
+            ),
+          },
+        ]}
+      />
+
+      {/* Confirmation Dialog */}
+      <ConfirmationDialog
+        open={isOpen}
+        onOpenChange={onOpenChange}
+        title={options?.title || ''}
+        description={options?.description || ''}
+        confirmText={options?.confirmText}
+        cancelText={options?.cancelText}
+        variant={options?.variant}
+        onConfirm={onConfirm}
+      />
+    </>
+  );
+}

package/src/components/agent-sidebar.tsx

@@ -0,0 +1,178 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useAgentPanels, useAgent, type AgentPanel } from '@/hooks/use-query-hooks';
+import type { UUID, Agent } from '@elizaos/core';
+import { Columns3, Database, Eye, Code, InfoIcon, Loader2 } from 'lucide-react';
+import { JSX, useMemo } from 'react';
+import { AgentActionViewer } from './agent-action-viewer';
+import { AgentLogViewer } from './agent-log-viewer';
+import { AgentMemoryViewer } from './agent-memory-viewer';
+import { Skeleton } from './ui/skeleton';
+import AgentSettings from '@/components/agent-settings';
+import { useAgentTabState } from '@/hooks/use-agent-tab-state';
+
+type AgentSidebarProps = {
+  agentId: UUID | undefined;
+  agentName: string;
+  channelId?: UUID;
+};
+
+type FixedTabValue = 'details' | 'actions' | 'logs' | 'memories';
+type TabValue = FixedTabValue | string;
+
+export function AgentSidebar({ agentId, agentName, channelId }: AgentSidebarProps) {
+  const { currentTab: detailsTab, setTab: setDetailsTab } = useAgentTabState(agentId);
+  const { data: panelsResponse, isLoading: isLoadingPanels } = useAgentPanels(agentId!, {
+    enabled: !!agentId,
+  });
+
+  const {
+    data: agentDataResponse,
+    isLoading: isLoadingAgent,
+    error: agentError,
+  } = useAgent(agentId, { enabled: !!agentId && detailsTab === 'details' });
+
+  const agent = agentDataResponse?.data as Agent | undefined;
+
+  const agentPanels = useMemo(() => {
+    return panelsResponse?.data || [];
+  }, [panelsResponse]);
+
+  const allTabs: { value: TabValue; label: string; icon: JSX.Element }[] = useMemo(() => {
+    const fixedTabs: { value: FixedTabValue; label: string; icon: JSX.Element }[] = [
+      { value: 'details', label: 'Details', icon: <InfoIcon className="h-4 w-4" /> },
+      { value: 'actions', label: 'Model Calls', icon: <Eye className="h-4 w-4" /> },
+      { value: 'memories', label: 'Memories', icon: <Database className="h-4 w-4" /> },
+      { value: 'logs', label: 'Logs', icon: <Code className="h-4 w-4" /> },
+    ];
+
+    const dynamicTabs = agentPanels.map((panel: AgentPanel) => ({
+      value: panel.name,
+      label: panel.name,
+      icon: <Columns3 className="h-4 w-4" />,
+    }));
+
+    return [...fixedTabs, ...dynamicTabs];
+  }, [agentPanels]);
+
+  return (
+    <Tabs
+      defaultValue="details"
+      value={detailsTab}
+      onValueChange={setDetailsTab}
+      className="flex flex-col h-screen w-full max-w-full"
+    >
+      <TabsList className="flex w-full max-w-full overflow-x-auto flex-shrink-0">
+        {allTabs.map((tab) => (
+          <TabsTrigger
+            key={tab.value}
+            value={tab.value}
+            className="flex items-center gap-1.5 flex-shrink-0"
+          >
+            {tab.icon}
+            <span className="truncate">{tab.label}</span>
+          </TabsTrigger>
+        ))}
+        {isLoadingPanels && (
+          <>
+            {[...Array(2)].map((_, i) => (
+              <Skeleton key={`skel-tab-${i}`} className="h-9 w-full rounded-md flex-shrink-0" />
+            ))}
+          </>
+        )}
+      </TabsList>
+
+      <TabsContent
+        value="details"
+        className="overflow-y-auto overflow-x-hidden flex-1 p-4 w-full max-w-full min-h-0"
+      >
+        {detailsTab === 'details' && agentId && (
+          <>
+            {isLoadingAgent && (
+              <div className="flex items-center justify-center h-full">
+                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              </div>
+            )}
+            {agentError && (
+              <div className="text-red-500 break-words">
+                Error loading agent details: {agentError.message}
+              </div>
+            )}
+            {!isLoadingAgent && !agentError && agent && (
+              <div className="w-full max-w-full">
+                <AgentSettings
+                  agent={agent}
+                  agentId={agentId}
+                  onSaveComplete={() => {
+                    // Stay on the same page after save in sidebar context
+                    // Agent settings saved from sidebar
+                  }}
+                />
+              </div>
+            )}
+            {!isLoadingAgent && !agentError && !agent && !isLoadingPanels && (
+              <div className="text-muted-foreground">Agent details not found.</div>
+            )}
+          </>
+        )}
+        {detailsTab === 'details' && !agentId && (
+          <div className="p-4 text-muted-foreground">Select an agent to see their details.</div>
+        )}
+      </TabsContent>
+
+      <TabsContent
+        value="actions"
+        className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"
+      >
+        {detailsTab === 'actions' && agentId && (
+          <div className="w-full max-w-full">
+            <AgentActionViewer agentId={agentId} />
+          </div>
+        )}
+        {detailsTab === 'actions' && !agentId && (
+          <div className="p-4 text-muted-foreground">Select an agent to see their actions.</div>
+        )}
+      </TabsContent>
+      <TabsContent
+        value="logs"
+        className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"
+      >
+        {detailsTab === 'logs' && agentId && (
+          <div className="w-full max-w-full">
+            <AgentLogViewer agentName={agentName} level="all" />
+          </div>
+        )}
+        {detailsTab === 'logs' && !agentId && (
+          <div className="p-4 text-muted-foreground">Select an agent to see their logs.</div>
+        )}
+      </TabsContent>
+      <TabsContent
+        value="memories"
+        className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"
+      >
+        {detailsTab === 'memories' && agentId && (
+          <div className="w-full max-w-full">
+            <AgentMemoryViewer agentId={agentId} agentName={agentName} channelId={channelId} />
+          </div>
+        )}
+        {detailsTab === 'memories' && !agentId && (
+          <div className="p-4 text-muted-foreground">Select an agent to see their memories.</div>
+        )}
+      </TabsContent>
+      {agentPanels.map((panel: AgentPanel) => (
+        <TabsContent
+          key={panel.name}
+          value={panel.name}
+          className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"
+        >
+          {detailsTab === panel.name && agentId && (
+            <iframe
+              src={panel.url}
+              title={panel.name}
+              className="w-full h-full border-0 flex-1 max-w-full"
+            />
+          )}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}

package/src/components/api-key-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Eye, EyeOff } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+const getLocalStorageApiKey = () =>
+  typeof window === 'undefined' ? 'eliza-api-key' : `eliza-api-key-${window.location.origin}`;
+interface ApiKeyDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApiKeySaved: () => void;
+}
+
+export function ApiKeyDialog({ open, onOpenChange, onApiKeySaved }: ApiKeyDialogProps) {
+  const [apiKey, setApiKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const { toast } = useToast();
+
+  const storageKey = getLocalStorageApiKey();
+
+  useEffect(() => {
+    if (open) {
+      try {
+        const storedKey = localStorage.getItem(storageKey);
+        if (storedKey) setApiKey(storedKey);
+      } catch (err) {
+        console.error('Unable to access localStorage', err);
+      }
+    }
+  }, [open, storageKey]);
+
+  const handleSave = () => {
+    if (!apiKey.trim()) {
+      toast({
+        title: 'API Key Required',
+        description: 'Please enter a valid API key.',
+        variant: 'destructive',
+      });
+      return;
+    }
+    try {
+      localStorage.setItem(storageKey, apiKey);
+    } catch (err) {
+      toast({
+        title: 'Storage Error',
+        description: 'Unable to save the API key (browser storage blocked).',
+        variant: 'destructive',
+      });
+      return;
+    }
+    onApiKeySaved();
+    toast({
+      title: 'API Key Saved',
+      description: 'The API key has been stored locally.',
+    });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>API Key Required</DialogTitle>
+          <DialogDescription>
+            Please enter the API key required to connect to the Eliza server. This key will be
+            stored locally in your browser.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="api-key" className="text-right">
+              API Key
+            </Label>
+            <div className="col-span-3 relative">
+              <Input
+                id="api-key"
+                type={showKey ? 'text' : 'password'}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                className="pr-10"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground"
+                onClick={() => setShowKey(!showKey)}
+                aria-label={showKey ? 'Hide API key' : 'Show API key'}
+              >
+                {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="button" onClick={handleSave}>
+            Save Key
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}