@elizaos/client 1.5.5-alpha.10

package/src/components/combobox.tsx

@@ -0,0 +1,187 @@
+import { useState, useRef, useEffect } from 'react';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ChevronDown, X } from 'lucide-react';
+import { formatAgentName } from '@/lib/utils';
+
+interface Option {
+  icon: string;
+  label: string;
+  id?: string;
+}
+
+interface MultiSelectComboboxProps {
+  options: Option[];
+  className?: string;
+  onSelect?: (selected: Option[]) => void;
+  initialSelected?: Option[];
+}
+
+export default function MultiSelectCombobox({
+  options = [],
+  className = '',
+  onSelect,
+  initialSelected = [],
+}: MultiSelectComboboxProps) {
+  const [selected, setSelected] = useState<Option[]>(initialSelected);
+  const [isOpen, setIsOpen] = useState(false);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+
+  // Apply initialSelected when it changes - improved to handle both initial load and updates
+  useEffect(() => {
+    setSelected(initialSelected);
+  }, [initialSelected]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (comboboxRef.current && !comboboxRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Helper function to compare options using id if available, fallback to label
+  const isOptionSelected = (option: Option): boolean => {
+    return selected.some((item) => {
+      if (option.id && item.id) {
+        return item.id === option.id;
+      }
+      return item.label === option.label;
+    });
+  };
+
+  // Helper function to find option in selected array
+  const findSelectedOption = (option: Option): Option | undefined => {
+    return selected.find((item) => {
+      if (option.id && item.id) {
+        return item.id === option.id;
+      }
+      return item.label === option.label;
+    });
+  };
+
+  const toggleSelection = (option: Option) => {
+    console.log('[MultiSelectCombobox] toggleSelection called with:', option);
+    setSelected((prev) => {
+      const isCurrentlySelected = isOptionSelected(option);
+      let newSelection: Option[];
+
+      if (isCurrentlySelected) {
+        // Remove the option
+        newSelection = prev.filter((item) => {
+          if (option.id && item.id) {
+            return item.id !== option.id;
+          }
+          return item.label !== option.label;
+        });
+      } else {
+        // Add the option
+        newSelection = [...prev, option];
+      }
+
+      console.log('[MultiSelectCombobox] New selection:', newSelection);
+      if (onSelect) onSelect(newSelection);
+      return newSelection;
+    });
+  };
+
+  const removeSelection = (option: Option) => {
+    setSelected((prev) => {
+      const newSelection = prev.filter((item) => {
+        if (option.id && item.id) {
+          return item.id !== option.id;
+        }
+        return item.label !== option.label;
+      });
+      if (onSelect) onSelect(newSelection);
+      return newSelection;
+    });
+  };
+
+  const removeExtraSelections = () => {
+    setSelected((prev) => {
+      const newSelection = prev.slice(0, 3); // Keep only the first 3
+      if (onSelect) onSelect(newSelection);
+      return newSelection;
+    });
+  };
+
+  return (
+    <div className={`relative w-80 ${className}`} ref={comboboxRef}>
+      <div
+        className={`flex items-center gap-2 border p-2 bg-background rounded cursor-pointer ${isOpen ? 'border-primary' : 'border-input'}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex flex-wrap gap-1 w-full">
+          {selected.length > 0 ? (
+            <>
+              {selected.slice(0, 3).map((item, index) => (
+                <Badge
+                  key={item.id || item.label || index}
+                  className="flex items-center gap-1 px-2"
+                >
+                  {item.label}
+                  <X
+                    size={12}
+                    className="cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeSelection(item);
+                    }}
+                  />
+                </Badge>
+              ))}
+              {selected.length > 3 && (
+                <Badge
+                  className="px-2 cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeExtraSelections();
+                  }}
+                >
+                  +{selected.length - 3} more
+                </Badge>
+              )}
+            </>
+          ) : (
+            <span className="text-muted-foreground">Select agents...</span>
+          )}
+        </div>
+        <ChevronDown size={16} />
+      </div>
+      {isOpen && (
+        <Card className="absolute left-0 mt-2 w-full shadow-md border border-border rounded z-40 max-h-60 overflow-y-auto">
+          {options.length === 0 ? (
+            <div className="p-2 text-muted-foreground text-sm">No agents available</div>
+          ) : (
+            options.map((option, index) => (
+              <div
+                key={option.id || option.label || index}
+                className={`flex items-center gap-2 p-2 cursor-pointer rounded hover:bg-muted ${
+                  isOptionSelected(option) ? 'bg-muted' : 'bg-card'
+                }`}
+                onClick={() => toggleSelection(option)}
+              >
+                <div className="bg-gray-500 rounded-full w-4 h-4 flex justify-center items-center overflow-hidden text-xs">
+                  {option.icon ? (
+                    <img
+                      src={option.icon}
+                      alt={option.label}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    formatAgentName(option.label)
+                  )}
+                </div>
+                {option.label}
+              </div>
+            ))
+          )}
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/components/confirmation-dialog.tsx

@@ -0,0 +1,59 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  variant?: 'default' | 'destructive';
+}
+
+export default function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  variant = 'destructive',
+}: ConfirmationDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className={
+              variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : undefined
+            }
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/connection-error-banner.tsx

@@ -0,0 +1,101 @@
+import { AlertCircle, ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useConnection } from '../context/ConnectionContext';
+
+export interface ConnectionErrorBannerProps {
+  className?: string;
+}
+
+export function ConnectionErrorBanner({ className }: ConnectionErrorBannerProps) {
+  const { status, error } = useConnection();
+
+  const shouldShowBanner = status === 'error' || status === 'unauthorized';
+
+  if (!shouldShowBanner) {
+    return null;
+  }
+
+  let errorTitle = 'Connection Failed';
+  let errorDescription = 'Please ensure the Eliza server is running and accessible.';
+  const isUnauthorized = status === 'unauthorized';
+
+  if (error) {
+    const errorMsg = error;
+
+    if (isUnauthorized) {
+      errorTitle = 'Unauthorized';
+      errorDescription = 'Invalid or missing API Key provided.';
+    } else if (errorMsg.includes('NetworkError') || errorMsg.includes('Failed to fetch')) {
+      errorTitle = 'Network Error';
+      errorDescription = 'Cannot reach the server. Please check your network connection.';
+    } else if (errorMsg.includes('ECONNREFUSED')) {
+      errorTitle = 'Connection Refused';
+      errorDescription = 'The server refused the connection. Please ensure it is running.';
+    } else if (errorMsg.includes('timeout')) {
+      errorTitle = 'Connection Timeout';
+      errorDescription = 'The server took too long to respond.';
+    } else if (
+      errorMsg.includes('404') ||
+      errorMsg.includes('not found') ||
+      errorMsg.includes('API endpoint not found') ||
+      errorMsg.includes('Endpoint not found')
+    ) {
+      errorTitle = 'Endpoint Not Found';
+      errorDescription = 'The server API endpoint could not be found.';
+    } else {
+      // Use the provided error message directly for other cases
+      errorDescription = errorMsg;
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-opacity-10 border rounded-md p-3 mb-4 w-full md:max-w-4xl',
+        'flex items-center justify-between w-full mt-4',
+        isUnauthorized
+          ? 'bg-yellow-900/20 border-yellow-700 text-yellow-100'
+          : 'bg-red-900/20 border-red-700 text-red-100',
+        className
+      )}
+    >
+      <div className="flex items-center space-x-3">
+        <AlertCircle
+          className={cn(
+            'h-5 w-5 flex-shrink-0',
+            isUnauthorized ? 'text-yellow-400' : 'text-red-400'
+          )}
+        />
+        <div>
+          <h4
+            className={cn(
+              'font-medium text-sm',
+              isUnauthorized ? 'text-yellow-200' : 'text-red-200'
+            )}
+          >
+            {errorTitle}
+          </h4>
+          <p className={cn('text-xs mt-1', isUnauthorized ? 'text-yellow-300' : 'text-red-300')}>
+            {errorDescription}
+          </p>
+          <div className="mt-2 flex space-x-4">
+            <a
+              href="https://eliza.how"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                'text-xs flex items-center',
+                isUnauthorized
+                  ? 'hover:text-yellow-200 text-yellow-300'
+                  : 'hover:text-red-200 text-red-300'
+              )}
+            >
+              <ExternalLink className="h-3 w-3 mr-1" />
+              Troubleshooting Guide
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/connection-status.cy.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+// Mock the context modules before importing the component
+beforeEach(() => {
+  cy.stub(React, 'useContext').callsFake((context: any) => {
+    if (context.displayName === 'AuthContext' || context._currentValue === undefined) {
+      return {
+        openApiKeyDialog: cy.stub(),
+      };
+    }
+    return context._currentValue;
+  });
+});
+
+import ConnectionStatus from './connection-status';
+
+describe('ConnectionStatus Component', () => {
+  it('renders connection status component', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Component should render without errors
+    cy.get('*').should('exist');
+  });
+
+  it('renders with default state', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Component should render
+    cy.get('*').should('exist');
+  });
+
+  it('has accessible elements', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Should render successfully with mocked context
+    cy.get('*').should('exist');
+  });
+
+  it('handles click interactions', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Component should render successfully
+    cy.get('*').should('exist');
+  });
+
+  it('displays status indicator', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Should render with mock contexts
+    cy.get('*').should('exist');
+  });
+
+  it('supports hover interactions', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Component should render without errors
+    cy.get('*').should('exist');
+  });
+
+  it('maintains consistent styling', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Should render successfully
+    cy.get('*').should('exist');
+  });
+
+  it('renders without console errors', () => {
+    cy.mount(<ConnectionStatus />);
+
+    // Basic smoke test - component renders
+    cy.get('*').should('exist');
+  });
+});

package/src/components/connection-status.tsx

@@ -0,0 +1,155 @@
+import { cn } from '@/lib/utils';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { SidebarMenuButton, SidebarMenuItem } from './ui/sidebar';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { useToast } from '@/hooks/use-toast';
+import { useAuth } from '../context/AuthContext';
+import { useConnection } from '../context/ConnectionContext';
+
+export interface ConnectionStatusProps {
+  // Allow standard HTML attributes like className
+  [key: string]: any;
+}
+
+export default function ConnectionStatus() {
+  const { toast } = useToast();
+  const [prevStatus, setPrevStatus] = useState<string | null>(null);
+  const { openApiKeyDialog } = useAuth();
+  const { status, error } = useConnection();
+
+  // Derive states from context
+  const isLoading = status === 'loading';
+  const isConnected = status === 'connected';
+  const isError = status === 'error';
+  const isUnauthorized = status === 'unauthorized'; // Context handles this now
+  const showingError = isError || isUnauthorized;
+
+  // Track connection state changes and show appropriate toast notifications
+  useEffect(() => {
+    // Transition from disconnected/error/unauthorized to connected
+    if (
+      (prevStatus === 'error' || prevStatus === 'unauthorized' || prevStatus === 'disconnected') &&
+      isConnected
+    ) {
+      toast({
+        title: 'Connection Restored',
+        description: (
+          <div className="flex items-center gap-2">
+            <CheckCircle className="h-4 w-4 text-green-500" />
+            <span>Successfully reconnected to the Eliza server.</span>
+          </div>
+        ),
+      });
+    } else if (prevStatus === 'connected' && (isError || isUnauthorized)) {
+      // Transition from connected to error/unauthorized
+      toast({
+        title: 'Connection Lost',
+        description: 'Attempting to reconnect to the Eliza server...',
+        variant: 'destructive',
+      });
+    }
+
+    // Update the connection state tracking for the next render
+    setPrevStatus(status);
+  }, [status, prevStatus, isConnected, isError, isUnauthorized, toast]);
+
+  useEffect(() => {
+    // If the status becomes unauthorized, trigger the API key dialog
+    if (isUnauthorized && prevStatus !== 'unauthorized') {
+      openApiKeyDialog(); // Trigger the global dialog
+    }
+  }, [isUnauthorized, prevStatus, openApiKeyDialog]);
+
+  const getStatusColor = () => {
+    if (isUnauthorized) return 'bg-yellow-500';
+    if (isLoading) return 'bg-muted-foreground';
+    return isConnected ? 'bg-green-600' : 'bg-red-600'; // Treat error/disconnected as red
+  };
+
+  const getStatusText = () => {
+    if (isUnauthorized) return 'Unauthorized';
+    if (isLoading) return 'Connecting...';
+    return isConnected ? 'Connected' : 'Disconnected';
+  };
+
+  const getTextColor = () => {
+    if (isUnauthorized) return 'text-yellow-500';
+    if (isLoading) return 'text-muted-foreground';
+    return isConnected ? 'text-green-600' : 'text-red-600';
+  };
+
+  // Get a specific error message based on the error
+  const getErrorMessage = () => {
+    if (!error) return 'Connection failed'; // Use error from context
+
+    // Specific check for Unauthorized first
+    if (isUnauthorized) {
+      return 'Unauthorized: Invalid or missing API Key. Check client configuration or server logs.';
+    }
+
+    // The context already provides the error message string
+    if (error.includes('NetworkError') || error.includes('Failed to fetch')) {
+      return 'Cannot reach server';
+    } else if (error.includes('ECONNREFUSED')) {
+      return 'Connection refused';
+    } else if (error.includes('timeout')) {
+      return 'Connection timeout';
+    } else if (
+      error.includes('404') ||
+      error.includes('not found') ||
+      error.includes('API endpoint not found')
+    ) {
+      return 'Endpoint not found';
+    }
+    return error; // Return the error message directly
+  };
+
+  return (
+    <SidebarMenuItem data-testid="connection-status">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <SidebarMenuButton className="rounded">
+            <div className="flex flex-col gap-1 select-none">
+              <div className="flex items-center gap-1">
+                {showingError || isUnauthorized ? (
+                  // Use AlertCircle for both general errors and unauthorized, but color differently
+                  <AlertCircle
+                    className={cn(
+                      'h-3.5 w-3.5',
+                      isUnauthorized ? 'text-yellow-500' : 'text-red-600'
+                    )}
+                  />
+                ) : (
+                  <div className={cn(['h-2.5 w-2.5 rounded-full', getStatusColor()])} />
+                )}
+                <span className={cn('text-xs', getTextColor())}>{getStatusText()}</span>
+              </div>
+            </div>
+          </SidebarMenuButton>
+        </TooltipTrigger>
+        {showingError && (
+          <TooltipContent side="top" align="center" className="max-w-xs">
+            <div className="flex flex-col gap-2">
+              <div
+                className={cn('font-semibold', isUnauthorized ? 'text-yellow-500' : 'text-red-500')}
+              >
+                {getErrorMessage()}
+              </div>
+              <p className="text-xs">Please ensure the Eliza server is running and accessible.</p>
+              {!isUnauthorized && (
+                <p className="text-xs">Try refreshing the connection or check server logs.</p>
+              )}
+              {isUnauthorized && (
+                <p className="text-xs">
+                  Check the X-API-KEY configured in your client or the ELIZA_SERVER_AUTH_TOKEN on
+                  the server.
+                </p>
+              )}
+            </div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    </SidebarMenuItem>
+  );
+}

package/src/components/copy-button.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@/components/ui/button';
+import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+const CopyButton = ({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+    });
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          onClick={handleCopy}
+          variant="ghost"
+          size="icon"
+          className="flex items-center space-x-2 text-muted-foreground"
+        >
+          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Copy</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default CopyButton;

package/src/components/delete-button.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+
+interface DeleteButtonProps {
+  onClick: () => void;
+}
+
+const DeleteButton = ({ onClick }: DeleteButtonProps) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button onClick={onClick} variant="ghost" size="icon" className="text-muted-foreground">
+          <Trash2 className="size-3" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Delete</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default DeleteButton;