@elizaos/client 1.5.5-alpha.10

package/src/components/onboarding-tour.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react';
+import Joyride, { CallBackProps, STATUS, ACTIONS } from 'react-joyride';
+import { useOnboarding } from '@/hooks/use-onboarding';
+import { useLocation } from 'react-router-dom';
+
+export default function OnboardingTour() {
+  const { onboardingCompleted, completeOnboarding } = useOnboarding();
+  const [run, setRun] = useState(false);
+  const location = useLocation();
+  const [tourStep, setTourStep] = useState(0);
+
+  // Home page tour steps
+  const homeSteps = [
+    {
+      target: '.sidebar-logo',
+      content:
+        'Welcome to ElizaOS! This is your gateway to creating and managing intelligent AI agents.',
+      disableBeacon: true,
+      title: 'Welcome to ElizaOS',
+    },
+    {
+      target: '.sidebar-create-button',
+      content:
+        'This is your main creation button. Click here to create new agents or rooms quickly.',
+      title: 'Create Button',
+    },
+    {
+      target: '.sidebar-online-section, .sidebar-offline-section',
+      content:
+        'Your agents are organized here. Online agents (green dot) are ready to chat, while offline agents need to be activated first.',
+      title: 'Your Agents',
+    },
+    {
+      target: '.sidebar-groups-section',
+      content:
+        'Access your agent groups from here to see collaborative conversations between multiple agents.',
+      title: 'Groups Navigation',
+    },
+    {
+      target: '.sidebar-docs-button, .sidebar-logs-button, .sidebar-settings-button',
+      content: 'Access documentation, system logs, and global settings from these utility buttons.',
+      title: 'System Utilities',
+    },
+    {
+      target: '.sidebar-connection-status',
+      content: 'This indicator shows your connection status to the ElizaOS server.',
+      title: 'Connection Status',
+    },
+    {
+      target: '.agents-section',
+      content:
+        'This is your main workspace showing all your agents. Active agents have a green dot, while inactive ones appear grayed out with an "Offline" label.',
+      title: 'Agent Dashboard',
+    },
+    {
+      target: '.message-button, .start-button',
+      content:
+        'Click "Message" to chat with active agents, or "Start" to activate offline agents first.',
+      title: 'Agent Interaction',
+    },
+    {
+      target: '.agent-info-button, .agent-settings-button',
+      content: 'View agent details or configure settings using these buttons on each agent card.',
+      title: 'Agent Management',
+    },
+    {
+      target: '.groups-section',
+      content:
+        'This section displays your agent groups for collaborative interactions between multiple agents.',
+      title: 'Agent Groups',
+    },
+    {
+      target: '.groups-create-button',
+      content:
+        'Create a new group by clicking this button. Groups allow multiple agents to interact together.',
+      title: 'Create New Group',
+    },
+    {
+      target: '.create-agent-button',
+      content: "Let's create your first agent! Click this button to get started.",
+      title: 'Create Your First Agent',
+      spotlightClicks: true,
+    },
+  ];
+
+  const createAgentSteps = [
+    {
+      target: '.agent-form-name',
+      content: 'Give your agent a name that reflects its purpose or personality.',
+      title: 'Name Your Agent',
+      disableBeacon: true,
+    },
+    {
+      target: '.agent-form-system-prompt',
+      content:
+        "The system prompt defines your agent's behavior and capabilities. This is the most important field for shaping how your agent will respond.",
+      title: 'Define Agent Behavior',
+    },
+    {
+      target: '.tabs-list',
+      content:
+        'Switch between these tabs to configure different aspects of your agent such as content, style, plugins, and appearance.',
+      title: 'Configuration Tabs',
+    },
+    {
+      target: '.agent-form-submit',
+      content: 'Click Save to create your agent and return to the dashboard.',
+      title: 'Save Your Agent',
+      spotlightClicks: true,
+    },
+  ];
+
+  // Select which steps to show based on current route
+  const steps =
+    location.pathname === '/' ? homeSteps : location.pathname === '/create' ? createAgentSteps : [];
+
+  // Start the tour when on the home page and not completed
+  useEffect(() => {
+    if (location.pathname === '/' && !onboardingCompleted && tourStep === 0) {
+      // Small delay to ensure DOM elements are loaded
+      const timer = setTimeout(() => {
+        setRun(true);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    } else if (location.pathname === '/create' && !onboardingCompleted && tourStep === 1) {
+      // Continue the tour on the create page
+      const timer = setTimeout(() => {
+        setRun(true);
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    } else {
+      setRun(false);
+    }
+  }, [location.pathname, onboardingCompleted, tourStep]);
+
+  // Handle tour events
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status, index, type, action } = data;
+
+    // If we finished the home page tour, update the tour step
+    if (location.pathname === '/' && type === 'step:after' && index === homeSteps.length - 1) {
+      setTourStep(1);
+      setRun(false);
+    }
+
+    // Tour is finished or skipped
+    if (status === STATUS.FINISHED || status === STATUS.SKIPPED || action === ACTIONS.CLOSE) {
+      completeOnboarding();
+      setRun(false);
+    }
+  };
+
+  // Don't render if onboarding is completed or no steps
+  if (onboardingCompleted || steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <Joyride
+      callback={handleJoyrideCallback}
+      continuous
+      run={run}
+      scrollToFirstStep
+      showProgress
+      showSkipButton
+      steps={steps}
+      floaterProps={{
+        disableAnimation: false,
+        styles: {
+          floater: {
+            filter: 'drop-shadow(0 10px 15px rgba(0, 0, 0, 0.25))',
+          },
+        },
+      }}
+      styles={{
+        options: {
+          primaryColor: '#3b82f6',
+          backgroundColor: '#1f2937',
+          textColor: '#f3f4f6',
+          overlayColor: 'rgba(0, 0, 0, 0.6)',
+          zIndex: 9999,
+          arrowColor: '#1f2937',
+          beaconSize: 36,
+        },
+        tooltip: {
+          fontSize: '14px',
+          padding: '16px',
+          borderRadius: '10px',
+          boxShadow: '0 10px 25px rgba(0, 0, 0, 0.3)',
+        },
+        tooltipContainer: {
+          textAlign: 'left',
+        },
+        tooltipTitle: {
+          fontSize: '16px',
+          fontWeight: '600',
+          marginBottom: '8px',
+        },
+        tooltipContent: {
+          padding: '5px 0',
+          fontSize: '14px',
+          lineHeight: '1.5',
+        },
+        buttonClose: {
+          color: '#9ca3af',
+          opacity: 0.8,
+        },
+        buttonBack: {
+          color: '#9ca3af',
+          fontSize: '14px',
+          fontWeight: '500',
+          padding: '8px 12px',
+          borderRadius: '6px',
+          marginRight: '8px',
+          transition: 'background-color 0.2s ease',
+        },
+        buttonNext: {
+          backgroundColor: '#3b82f6',
+          fontSize: '14px',
+          fontWeight: '500',
+          padding: '8px 16px',
+          borderRadius: '6px',
+          color: 'white',
+          border: 'none',
+          boxShadow: '0 4px 6px rgba(59, 130, 246, 0.3)',
+          transition: 'all 0.2s ease',
+        },
+        buttonSkip: {
+          color: '#9ca3af',
+          fontSize: '14px',
+          padding: '8px 12px',
+          borderRadius: '6px',
+          transition: 'background-color 0.2s ease',
+        },
+        spotlight: {
+          borderRadius: '8px',
+          backgroundColor: 'transparent',
+        },
+        overlay: {
+          backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        },
+      }}
+    />
+  );
+}

package/src/components/page-title.tsx

@@ -0,0 +1,8 @@
+export default function PageTitle({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div className="space-y-0.5">
+      <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+      {subtitle ? <p className="text-muted-foreground">{subtitle}</p> : null}
+    </div>
+  );
+}

package/src/components/plugins-panel.tsx

@@ -0,0 +1,383 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { usePlugins } from '@/hooks/use-plugins';
+import { useToast } from '@/hooks/use-toast';
+import type { Agent } from '@elizaos/core';
+import clsx from 'clsx';
+import { CircleAlert } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import {
+  // getAllRequiredPlugins,
+  getVoiceModelByValue,
+  providerPluginMap,
+} from '../config/voice-models';
+import { Button } from './ui/button';
+
+interface PluginsPanelProps {
+  characterValue: Agent;
+  setCharacterValue: {
+    addPlugin?: (pluginId: string) => void;
+    removePlugin?: (index: number) => void;
+    setPlugins?: (plugins: string[]) => void;
+    updateField?: <T>(path: string, value: T) => void;
+    [key: string]: any;
+  };
+  initialPlugins?: string[];
+}
+
+// Define a type for the essential plugin information
+type EssentialPluginInfo = {
+  title: string;
+  description: string;
+};
+
+// Map of essential plugins that require confirmation when removing
+const ESSENTIAL_PLUGINS: Record<string, EssentialPluginInfo> = {
+  '@elizaos/plugin-sql': {
+    title: 'Essential Plugin: SQL',
+    description:
+      'Provides memory and state storage. If removed, replace with an adapter plugin or your agent may lose conversation history and memory capabilities.',
+  },
+  '@elizaos/plugin-openai': {
+    title: 'Essential Plugin: OpenAI',
+    description:
+      'Provides language model access. If removed, replace with another LLM plugin or your agent may fail to function properly.',
+  },
+  '@elizaos/plugin-bootstrap': {
+    title: 'Essential Plugin: Bootstrap',
+    description:
+      'Provides default message processing, event handling, and attachment workflows for your agent. If removed, ensure you have a custom plugin handling these responsibilities, or your agent may not process events or respond to messages as expected.',
+  },
+};
+
+export default function PluginsPanel({
+  characterValue,
+  setCharacterValue,
+  initialPlugins,
+}: PluginsPanelProps) {
+  const { data: plugins, error } = usePlugins();
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [pendingRemoval, setPendingRemoval] = useState<string | null>(null);
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+
+  // Ensure we always have arrays and normalize plugin names
+  const safeCharacterPlugins = useMemo(() => {
+    if (!Array.isArray(characterValue?.plugins)) return [];
+    return characterValue.plugins;
+  }, [characterValue?.plugins]);
+
+  // Get plugin names from available plugins
+  const pluginNames = useMemo(() => {
+    const defaultPlugins = ['@elizaos/plugin-sql'];
+    if (!plugins) return defaultPlugins;
+    return [
+      ...defaultPlugins,
+      ...(Array.isArray(plugins) ? plugins : Object.keys(plugins)).filter(
+        (name) => !defaultPlugins.includes(name)
+      ),
+    ];
+  }, [plugins]);
+
+  // Check if the selected voice model requires specific plugins
+  const voiceModelPluginInfo = useMemo(() => {
+    const settings = characterValue?.settings;
+    if (!settings || typeof settings !== 'object' || Array.isArray(settings)) return null;
+
+    const voice = settings.voice;
+    if (!voice || typeof voice !== 'object' || Array.isArray(voice)) return null;
+
+    const voiceModelValue = voice.model;
+    if (!voiceModelValue || typeof voiceModelValue !== 'string') return null;
+
+    const voiceModel = getVoiceModelByValue(voiceModelValue);
+    if (!voiceModel) return null;
+
+    // Get required plugin from configuration
+    const requiredPlugin = providerPluginMap[voiceModel.provider];
+    const isPluginEnabled = safeCharacterPlugins.includes(requiredPlugin);
+
+    return {
+      provider: voiceModel.provider,
+      requiredPlugin,
+      isPluginEnabled,
+    };
+  }, [characterValue?.settings, safeCharacterPlugins]);
+
+  // Get all voice-related plugins that are currently enabled
+  // const enabledVoicePlugins = useMemo(() => {
+  //   const voicePlugins = getAllRequiredPlugins();
+  //   return safeCharacterPlugins.filter((plugin) => voicePlugins.includes(plugin));
+  // }, [safeCharacterPlugins]);
+
+  const hasChanged = useMemo(() => {
+    if (!initialPlugins) return false;
+    if (initialPlugins.length !== safeCharacterPlugins.length) return true;
+    return !initialPlugins?.every((plugin) => safeCharacterPlugins.includes(plugin));
+  }, [safeCharacterPlugins, initialPlugins]);
+
+  const filteredPlugins = useMemo(() => {
+    return pluginNames
+      .filter((plugin) => !safeCharacterPlugins.includes(plugin))
+      .filter((plugin) => plugin.toLowerCase().includes(searchQuery.toLowerCase()));
+  }, [pluginNames, safeCharacterPlugins, searchQuery]);
+
+  const handlePluginAdd = (plugin: string) => {
+    if (safeCharacterPlugins.includes(plugin)) return;
+
+    if (setCharacterValue.addPlugin) {
+      setCharacterValue.addPlugin(plugin);
+    } else if (setCharacterValue.updateField) {
+      const currentPlugins = Array.isArray(characterValue.plugins)
+        ? [...characterValue.plugins]
+        : [];
+      setCharacterValue.updateField('plugins', [...currentPlugins, plugin]);
+    }
+  };
+
+  const handlePluginRemove = (plugin: string) => {
+    // Check if it's an essential plugin that needs confirmation
+    if (Object.keys(ESSENTIAL_PLUGINS).includes(plugin)) {
+      setPendingRemoval(plugin);
+      setIsConfirmDialogOpen(true);
+      return;
+    }
+
+    // If not essential, proceed with removal immediately
+    removePlugin(plugin);
+  };
+
+  // Actual plugin removal after confirmation (if required)
+  const removePlugin = (plugin: string) => {
+    const index = safeCharacterPlugins.indexOf(plugin);
+    if (index !== -1) {
+      if (setCharacterValue.removePlugin) {
+        setCharacterValue.removePlugin(index);
+      } else if (setCharacterValue.updateField) {
+        const newPlugins = [...safeCharacterPlugins];
+        newPlugins.splice(index, 1);
+        setCharacterValue.updateField('plugins', newPlugins);
+      }
+    }
+  };
+
+  // Function to handle confirmation dialog acceptance
+  const handleConfirmRemoval = () => {
+    if (pendingRemoval) {
+      removePlugin(pendingRemoval);
+      setPendingRemoval(null);
+    }
+    setIsConfirmDialogOpen(false);
+  };
+
+  // Function to handle confirmation dialog cancellation
+  const handleCancelRemoval = () => {
+    setPendingRemoval(null);
+    setIsConfirmDialogOpen(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Plugins</h3>
+          {error ? (
+            <p className="text-destructive">Failed to load plugins: {error.message}</p>
+          ) : (
+            <div className="space-y-4">
+              {/* Alert Dialog for Essential Plugin Removal */}
+              <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      {pendingRemoval && Object.keys(ESSENTIAL_PLUGINS).includes(pendingRemoval)
+                        ? ESSENTIAL_PLUGINS[pendingRemoval].title
+                        : 'Warning: Essential Plugin'}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {pendingRemoval && Object.keys(ESSENTIAL_PLUGINS).includes(pendingRemoval)
+                        ? ESSENTIAL_PLUGINS[pendingRemoval].description
+                        : 'This plugin provides essential functionality for your agent.'}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel onClick={handleCancelRemoval}>Cancel</AlertDialogCancel>
+                    <AlertDialogAction onClick={handleConfirmRemoval}>
+                      Confirm Removal
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+
+              {voiceModelPluginInfo && (
+                <div className="rounded-md border p-4 mb-4 flex items-center gap-2">
+                  <CircleAlert className="h-4 w-4 text-yellow-500" />
+                  <p className="text-xs text-white">
+                    {(() => {
+                      switch (voiceModelPluginInfo.provider) {
+                        case 'elevenlabs':
+                          return 'ElevenLabs plugin is required for the selected voice model.';
+                        case 'openai':
+                          return 'OpenAI plugin is required for the selected voice model.';
+                        case 'none':
+                          return 'No voice plugin required for "No Voice" option.';
+                        default:
+                          return `${voiceModelPluginInfo.provider} plugin is required for the selected voice model.`;
+                      }
+                    })()}
+                  </p>
+                  {/* 
+                    Commented out for now — this warning doesn't make sense when using ElevenLabs voice model with OpenAI plugin.
+                  */}
+                  {/* {enabledVoicePlugins.length > 1 && (
+                    <p className="text-xs text-amber-600 mt-2">
+                      Multiple voice plugins detected. This may cause conflicts. Consider removing
+                      unused voice plugins.
+                    </p>
+                  )} */}
+                </div>
+              )}
+              {safeCharacterPlugins.length > 0 && (
+                <div className="rounded-md bg-muted p-4">
+                  <h4 className="text-sm font-medium mb-2">Currently Enabled</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {[...safeCharacterPlugins]
+                      .sort((a, b) => {
+                        const aIsEssential = Object.keys(ESSENTIAL_PLUGINS).includes(a);
+                        const bIsEssential = Object.keys(ESSENTIAL_PLUGINS).includes(b);
+                        if (aIsEssential === bIsEssential) return 0;
+                        return aIsEssential ? -1 : 1;
+                      })
+                      .map((plugin) => {
+                        // Check if this plugin is required by the current voice model
+                        const isRequiredByVoice = voiceModelPluginInfo?.requiredPlugin === plugin;
+                        // Check if this is an essential plugin (SQL or OpenAI)
+                        const isEssential = Object.keys(ESSENTIAL_PLUGINS).includes(plugin);
+
+                        return (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            key={plugin}
+                            className={`inline-flex items-center rounded-full ${
+                              isEssential
+                                ? 'bg-blue-800 text-blue-700 hover:bg-blue-600'
+                                : 'bg-primary/10 text-primary hover:bg-primary/20'
+                            } px-2.5 py-0.5 text-xs font-medium h-auto`}
+                            title={
+                              isRequiredByVoice
+                                ? 'Required by voice model'
+                                : isEssential
+                                  ? 'Essential plugin for agent functionality'
+                                  : ''
+                            }
+                          >
+                            {isEssential && (
+                              <span className="w-2 h-2 rounded-full bg-white inline-block"></span>
+                            )}
+                            <span className="text-white font-semibold">{plugin}</span>
+                            <span
+                              className={clsx(
+                                'ml-1 opacity-70 hover:opacity-100',
+                                isEssential && 'text-white'
+                              )}
+                              onClick={() => {
+                                // Don't allow removing if it's required by the voice model
+                                if (isRequiredByVoice) {
+                                  toast({
+                                    title: "Can't Remove Plugin",
+                                    description:
+                                      'This plugin is required by the selected voice model.',
+                                    variant: 'destructive',
+                                  });
+                                  return;
+                                }
+                                handlePluginRemove(plugin);
+                              }}
+                            >
+                              ×
+                            </span>
+                          </Button>
+                        );
+                      })}
+                  </div>
+                  <div className="mt-3 text-xs text-muted-foreground">
+                    <span className="inline-flex items-center">
+                      <span className="w-2 h-2 rounded-full bg-blue-600 mr-1"></span>
+                      Essential plugins provide core functionality
+                    </span>
+                  </div>
+                </div>
+              )}
+              <div className="space-y-2">
+                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start">
+                      Search and add plugins...
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="max-w-[400px]">
+                    <DialogHeader>
+                      <DialogTitle>Add Plugins</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4 py-4">
+                      <div className="space-y-2">
+                        <Input
+                          type="search"
+                          placeholder="Search plugins..."
+                          value={searchQuery}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+                      </div>
+                      <div className="max-h-[300px] overflow-y-auto space-y-2">
+                        {filteredPlugins.length === 0 ? (
+                          <p className="text-sm text-muted-foreground">No plugins found.</p>
+                        ) : (
+                          filteredPlugins.map((plugin) => (
+                            <Button
+                              key={plugin}
+                              variant="ghost"
+                              className="w-full justify-start font-normal"
+                              onClick={() => {
+                                handlePluginAdd(plugin);
+                                setSearchQuery('');
+                                setIsDialogOpen(false);
+                              }}
+                            >
+                              {plugin}
+                            </Button>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+              {hasChanged && (
+                <p className="text-xs text-yellow-500">Plugins configuration has been changed</p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}