@elizaos/client 1.5.5-alpha.10

package/src/hooks/use-delete-agent.ts

@@ -0,0 +1,123 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from './use-toast';
+import { useQueryClient } from '@tanstack/react-query';
+import { createElizaClient } from '@/lib/api-client-config';
+import type { Agent } from '@elizaos/core';
+
+export function useDeleteAgent(targetAgentData: Agent) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const handleDelete = useCallback(async () => {
+    setIsDeleting(true);
+    toast({
+      title: 'Deleting...',
+      description: `Deleting agent "${targetAgentData.name}"`,
+    });
+
+    let responseReceived = false;
+    let navigationTimer = null;
+
+    try {
+      navigationTimer = setTimeout(() => {
+        if (!responseReceived) {
+          queryClient.invalidateQueries({ queryKey: ['agents'] });
+          navigate('/');
+          toast({
+            title: 'Note',
+            description: 'Deletion is still processing in the background.',
+          });
+        }
+      }, 8000);
+
+      const elizaClient = createElizaClient();
+
+      // Ensure we have a valid ID
+      if (!targetAgentData.id) {
+        throw new Error('Agent ID is required for deletion');
+      }
+
+      const response = await elizaClient.agents.deleteAgent(targetAgentData.id);
+      responseReceived = true;
+
+      if (navigationTimer) {
+        clearTimeout(navigationTimer);
+      }
+
+      // Check if response indicates partial completion (need to verify actual API response type)
+      const isPartial = (response as any)?.partial;
+
+      if (isPartial) {
+        toast({
+          title: 'Processing',
+          description: 'Deletion is still in progress and will complete in the background.',
+        });
+      } else {
+        toast({
+          title: 'Success',
+          description: 'Agent deleted successfully',
+        });
+      }
+
+      queryClient.invalidateQueries({ queryKey: ['agents'] });
+      navigate('/');
+    } catch (deleteError: any) {
+      responseReceived = true;
+
+      if (navigationTimer) {
+        clearTimeout(navigationTimer);
+      }
+
+      const errorMessage = deleteError?.message ?? 'Failed to delete agent';
+      const statusCode = deleteError?.statusCode || deleteError?.response?.status;
+
+      if (
+        statusCode === 409 ||
+        errorMessage.includes('409') ||
+        errorMessage.includes('Conflict') ||
+        errorMessage.includes('foreign key constraint') ||
+        errorMessage.includes('active references')
+      ) {
+        toast({
+          title: 'Cannot Delete',
+          description:
+            'This agent cannot be deleted because it has active references. Try stopping the agent first.',
+          variant: 'destructive',
+        });
+      } else if (
+        statusCode === 408 ||
+        statusCode === 504 ||
+        errorMessage.includes('408') ||
+        errorMessage.includes('504') ||
+        errorMessage.includes('timeout') ||
+        errorMessage.includes('timed out')
+      ) {
+        toast({
+          title: 'Operation Timeout',
+          description:
+            'The deletion is taking longer than expected and will continue in the background.',
+          variant: 'destructive',
+        });
+
+        queryClient.invalidateQueries({ queryKey: ['agents'] });
+        navigate('/');
+      } else {
+        toast({
+          title: 'Error',
+          description: errorMessage,
+          variant: 'destructive',
+        });
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [targetAgentData, toast, navigate, queryClient]);
+
+  return {
+    handleDelete,
+    isDeleting,
+  };
+}

package/src/hooks/use-dm-channels.ts

@@ -0,0 +1,198 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { createElizaClient } from '@/lib/api-client-config';
+import { useToast } from '@/hooks/use-toast';
+
+// Create ElizaClient instance
+const elizaClient = createElizaClient();
+import { type UUID, ChannelType } from '@elizaos/core';
+import type { MessageChannel } from '@/types';
+import { mapApiChannelToClient } from '@/lib/api-type-mappers';
+import clientLogger from '@/lib/logger';
+import { STALE_TIMES } from './use-query-hooks';
+import { getEntityId } from '@/lib/utils';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * Hook to get or create a DM channel between current user and target user (agent)
+ * This is the original behavior, usually resulting in a single canonical DM channel.
+ */
+export function useGetOrCreateDmChannel() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const currentUserId = getEntityId();
+
+  return useMutation({
+    mutationFn: async (targetUserId: UUID) => {
+      clientLogger.info(
+        '[useGetOrCreateDmChannel] Getting or creating canonical DM channel with target:',
+        targetUserId
+      );
+      const elizaClient = createElizaClient();
+      const result = await elizaClient.messaging.getOrCreateDmChannel({
+        participantIds: [currentUserId, targetUserId],
+      });
+      return result;
+    },
+    onSuccess: (data) => {
+      clientLogger.info('[useGetOrCreateDmChannel] Canonical DM channel created/found:', data);
+      queryClient.invalidateQueries({ queryKey: ['channels'] });
+      queryClient.invalidateQueries({ queryKey: ['dmChannels'] });
+      const agentId =
+        data.metadata?.user1 === currentUserId ? data.metadata?.user2 : data.metadata?.user1;
+      if (agentId) {
+        queryClient.invalidateQueries({ queryKey: ['dmChannels', agentId, currentUserId] });
+      }
+    },
+    onError: (error) => {
+      clientLogger.error(
+        '[useGetOrCreateDmChannel] Error creating/finding canonical DM channel:',
+        error
+      );
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to process DM channel',
+        variant: 'destructive',
+      });
+    },
+  });
+}
+
+/**
+ * Hook to fetch all DM conversations (channels marked as DMs) for a specific agent.
+ */
+export function useDmChannelsForAgent(
+  agentId: UUID | undefined,
+  serverId: UUID = '00000000-0000-0000-0000-000000000000' as UUID
+) {
+  const currentUserId = getEntityId();
+
+  return useQuery<MessageChannel[]>({
+    queryKey: ['dmChannels', agentId, currentUserId], // This key will be invalidated by useCreateDmChannel
+    queryFn: async () => {
+      if (!agentId) return [];
+      clientLogger.info(
+        '[useDmChannelsForAgent] Fetching distinct DM channels for agent:',
+        agentId
+      );
+
+      const elizaClient = createElizaClient();
+      const result = await elizaClient.messaging.getServerChannels(serverId);
+      const apiChannels = result.channels || [];
+
+      // Map API channels to client type
+      const allChannels = apiChannels.map(mapApiChannelToClient);
+
+      const dmChannels = allChannels.filter((channel) => {
+        const metadata = channel.metadata || {};
+        const isCorrectType = channel.type === ChannelType.DM;
+        const isMarkedAsDm = metadata.isDm === true;
+        // Ensure this DM context is specifically associated with the target agentId
+        const isForThisAgentContext = metadata.forAgent === agentId;
+
+        const isParticipant =
+          (metadata.user1 === currentUserId && metadata.user2 === agentId) ||
+          (metadata.user1 === agentId && metadata.user2 === currentUserId);
+
+        // Primary filter for new-style distinct DMs
+        if (isCorrectType && isMarkedAsDm && isForThisAgentContext && isParticipant) {
+          return true;
+        }
+
+        // Fallback for older, canonical DM channels that might be named DM-UserA-UserB
+        // This ensures existing single DMs are still listed if they haven't been migrated to new metadata.
+        // This part of the filter might become less relevant as new distinct DMs are created.
+        if (channel.type === ChannelType.DM && !metadata.isDm && !metadata.forAgent) {
+          const channelName = channel.name.toLowerCase();
+          // Check if name follows the old convention: DM-currentUserId-agentId or DM-agentId-currentUserId
+          const defaultDmName1 = `dm-${currentUserId}-${agentId}`.toLowerCase();
+          const defaultDmName2 = `dm-${agentId}-${currentUserId}`.toLowerCase();
+          if (channelName === defaultDmName1 || channelName === defaultDmName2) {
+            clientLogger.warn(
+              '[useDmChannelsForAgent] Matched a canonical DM channel by name convention:',
+              channel.id,
+              channel.name
+            );
+            return true;
+          }
+        }
+
+        return false;
+      });
+
+      clientLogger.info(
+        '[useDmChannelsForAgent] Found distinct DM channels:',
+        dmChannels.length,
+        dmChannels.map((c) => ({ id: c.id, name: c.name, metadata: c.metadata }))
+      );
+
+      return dmChannels.sort((a, b) => {
+        const aTime = new Date(a.updatedAt || a.createdAt).getTime();
+        const bTime = new Date(b.updatedAt || b.createdAt).getTime();
+        return bTime - aTime;
+      });
+    },
+    enabled: !!agentId,
+    staleTime: STALE_TIMES.FREQUENT, // More frequent stale time to catch new chats quickly
+    refetchInterval: STALE_TIMES.STANDARD, // Poll less aggressively, rely on invalidation primarily
+  });
+}
+
+/**
+ * Hook to create a new, distinct DM channel (conversation) with an agent.
+ */
+export function useCreateDmChannel() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const currentUserId = getEntityId();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: async ({ agentId, channelName }: { agentId: UUID; channelName: string }) => {
+      clientLogger.info('[useCreateDmChannel] Creating new distinct DM channel with agent:', {
+        agentId,
+        channelName,
+      });
+
+      if (!channelName || !channelName.trim()) {
+        // This should ideally be caught before calling the mutation, but good to have a check.
+        throw new Error('Channel name cannot be empty for a new DM conversation.');
+      }
+
+      const elizaClient = createElizaClient();
+      const result = await elizaClient.messaging.createGroupChannel({
+        name: channelName.trim(),
+        participantIds: [currentUserId, agentId],
+        metadata: {
+          type: ChannelType.DM, // Set type to DM
+          server_id: '00000000-0000-0000-0000-000000000000' as UUID, // Use the default server
+          isDm: true, // Mark it as a DM type conversation
+          user1: currentUserId, // Explicitly store participants for filtering
+          user2: agentId,
+          forAgent: agentId, // Critical: associates this DM context with the specific agent
+          createdAt: new Date().toISOString(), // Add a creation timestamp in metadata
+        },
+      });
+
+      return result; // Direct result from ElizaClient
+    },
+    onSuccess: (data, variables) => {
+      clientLogger.info('[useCreateDmChannel] Distinct DM channel created successfully:', data);
+      toast({
+        title: 'New Chat Started',
+        description: `Conversation "${data.name}" created.`,
+      });
+      // Invalidate queries to refresh the DM channel list for this agent
+      queryClient.invalidateQueries({ queryKey: ['dmChannels', variables.agentId, currentUserId] });
+      // Also invalidate general channels list if it might show DMs (though less likely)
+      queryClient.invalidateQueries({ queryKey: ['channels'] });
+    },
+    onError: (error) => {
+      clientLogger.error('[useCreateDmChannel] Error creating distinct DM channel:', error);
+      toast({
+        title: 'Error Creating Chat',
+        description: error instanceof Error ? error.message : 'Could not start new chat.',
+        variant: 'destructive',
+      });
+    },
+  });
+}

package/src/hooks/use-elevenlabs-voices.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { elevenLabsVoiceModels } from '@/config/voice-models';
+import type { VoiceModel } from '@/config/voice-models';
+
+// TODO: Move this to a shared config file, or the 11labs plugin once plugin categories are implemented
+
+interface ElevenLabsVoice {
+  voice_id: string;
+  name: string;
+  category: string;
+  labels?: {
+    accent?: string;
+    age?: string;
+    description?: string;
+    gender?: string;
+    use_case?: string;
+  };
+  preview_url?: string;
+}
+
+export function useElevenLabsVoices() {
+  const [apiKey, setApiKey] = useState<string | null>(null);
+
+  // Load API key from localStorage or another source
+  useEffect(() => {
+    const storedKey = localStorage.getItem('ELEVENLABS_API_KEY');
+    setApiKey(storedKey);
+  }, []);
+
+  return useQuery({
+    queryKey: ['elevenlabs-voices', apiKey],
+    queryFn: async () => {
+      // If no API key is available, return empty array (no custom voices)
+      if (!apiKey) {
+        return [];
+      }
+
+      try {
+        const response = await fetch('https://api.elevenlabs.io/v2/voices', {
+          method: 'GET',
+          headers: {
+            'xi-api-key': apiKey,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('Failed to fetch ElevenLabs voices:', response.statusText);
+          return [];
+        }
+
+        const data = await response.json();
+
+        // Get the IDs of the default voices we already have
+        const defaultVoiceIds = elevenLabsVoiceModels.map((v) => v.value);
+
+        // Filter to only include custom/cloned voices (those not in the default list)
+        const customVoices: ElevenLabsVoice[] = data.voices.filter(
+          (voice: ElevenLabsVoice) => !defaultVoiceIds.includes(voice.voice_id)
+        );
+
+        // Transform only the custom voices to match our VoiceModel format
+        const apiVoices: VoiceModel[] = customVoices.map((voice: ElevenLabsVoice) => ({
+          value: voice.voice_id,
+          label: `ElevenLabs - ${voice.name} (Custom)`,
+          provider: 'elevenlabs',
+          gender: voice.labels?.gender === 'female' ? 'female' : 'male',
+          language: 'en',
+          features: [voice.category || 'professional', voice.labels?.description || 'natural'],
+        }));
+
+        return apiVoices;
+      } catch (error) {
+        console.error('Error fetching ElevenLabs voices:', error);
+        return [];
+      }
+    },
+    // Refresh the data every hour
+    staleTime: 60 * 60 * 1000,
+    // Don't refetch on window focus
+    refetchOnWindowFocus: false,
+  });
+}

package/src/hooks/use-file-upload.ts

@@ -0,0 +1,224 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { getContentTypeFromMimeType } from '@elizaos/core';
+import { UUID, Media, ChannelType } from '@elizaos/core';
+import { randomUUID } from '@/lib/utils';
+import { createElizaClient } from '@/lib/api-client-config';
+import { useToast } from '@/hooks/use-toast';
+// Direct error handling
+import clientLogger from '@/lib/logger';
+
+export type UploadingFile = {
+  file: File;
+  id: string;
+  isUploading: boolean;
+  uploadProgress?: number;
+  error?: string;
+  blobUrl?: string;
+};
+
+interface UseFileUploadProps {
+  agentId?: UUID;
+  channelId?: UUID;
+  chatType: ChannelType.DM | ChannelType.GROUP;
+}
+
+export function useFileUpload({ agentId, channelId, chatType }: UseFileUploadProps) {
+  const [selectedFiles, setSelectedFiles] = useState<UploadingFile[]>([]);
+  const blobUrlsRef = useRef<Set<string>>(new Set());
+  const { toast } = useToast();
+  const elizaClient = createElizaClient();
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      blobUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+      blobUrlsRef.current.clear();
+    };
+  }, []);
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || []);
+      const validFiles = files.filter(
+        (file) =>
+          file.type.startsWith('image/') ||
+          file.type.startsWith('video/') ||
+          file.type.startsWith('audio/') ||
+          file.type === 'application/pdf' ||
+          file.type === 'application/msword' ||
+          file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+          file.type === 'application/vnd.ms-excel' ||
+          file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+          file.type === 'application/vnd.ms-powerpoint' ||
+          file.type ===
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
+          file.type.startsWith('text/')
+      );
+
+      const uniqueFiles = validFiles.filter((newFile) => {
+        return !selectedFiles.some(
+          (existingFile) =>
+            existingFile.file.name === newFile.name &&
+            existingFile.file.size === newFile.size &&
+            existingFile.file.lastModified === newFile.lastModified
+        );
+      });
+
+      const newUploadingFiles: UploadingFile[] = uniqueFiles.map((file) => ({
+        file,
+        id: randomUUID(),
+        isUploading: false,
+      }));
+
+      setSelectedFiles((prev) => {
+        const combined = [...prev, ...newUploadingFiles];
+        return Array.from(
+          new Map(combined.map((f) => [`${f.file.name}-${f.file.size}`, f])).values()
+        );
+      });
+      if (e.target) e.target.value = '';
+    },
+    [selectedFiles]
+  );
+
+  const removeFile = useCallback((fileId: string) => {
+    setSelectedFiles((prev) => {
+      const file = prev.find((f) => f.id === fileId);
+      if (file?.blobUrl) {
+        URL.revokeObjectURL(file.blobUrl);
+        blobUrlsRef.current.delete(file.blobUrl);
+      }
+      return prev.filter((f) => f.id !== fileId);
+    });
+  }, []);
+
+  const createBlobUrls = useCallback((files: UploadingFile[]): Media[] => {
+    const attachmentBlobUrls: string[] = [];
+    const optimisticAttachments = files
+      .map((sf) => {
+        const blobUrl = URL.createObjectURL(sf.file);
+        blobUrlsRef.current.add(blobUrl);
+        attachmentBlobUrls.push(blobUrl);
+        sf.blobUrl = blobUrl;
+        return {
+          id: sf.id,
+          url: blobUrl,
+          title: sf.file.name,
+          contentType: getContentTypeFromMimeType(sf.file.type),
+          isUploading: true,
+        };
+      })
+      .filter((att) => att.contentType !== undefined) as Media[];
+
+    return optimisticAttachments;
+  }, []);
+
+  const uploadFiles = useCallback(
+    async (
+      files: UploadingFile[]
+    ): Promise<{
+      uploaded: Media[];
+      failed: Array<{ file: UploadingFile; error: string }>;
+      blobUrls: string[];
+    }> => {
+      if (!files.length) return { uploaded: [], failed: [], blobUrls: [] };
+
+      const uploadPromises = files.map(async (fileData) => {
+        try {
+          const uploadResult =
+            chatType === ChannelType.DM && agentId
+              ? await elizaClient.media.uploadAgentMedia(agentId, {
+                  file: fileData.file,
+                  filename: fileData.file.name,
+                })
+              : await elizaClient.media.uploadChannelMedia(channelId!, fileData.file);
+
+          return {
+            success: true,
+            media: {
+              id: fileData.id,
+              url: uploadResult.url,
+              title: fileData.file.name,
+              source: 'file_upload',
+              contentType: getContentTypeFromMimeType(fileData.file.type),
+            } as Media,
+          };
+        } catch (uploadError) {
+          clientLogger.error(`Failed to upload ${fileData.file.name}:`, uploadError);
+
+          // Direct error handling
+          toast({
+            title: `Upload Failed: ${fileData.file.name}`,
+            description: uploadError instanceof Error ? uploadError.message : 'Upload failed',
+            variant: 'destructive',
+          });
+
+          return {
+            success: false,
+            file: fileData,
+            error: uploadError instanceof Error ? uploadError.message : 'Upload failed',
+          };
+        }
+      });
+
+      const settledUploads = await Promise.allSettled(uploadPromises);
+      const uploaded: Media[] = [];
+      const failed: Array<{ file: UploadingFile; error: string }> = [];
+      const blobUrls: string[] = [];
+
+      settledUploads.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+          if (result.value.success && 'media' in result.value) {
+            uploaded.push(result.value.media as Media);
+          } else if ('file' in result.value) {
+            failed.push(result.value as { file: UploadingFile; error: string });
+          }
+        } else {
+          // Handle rejected promise
+          failed.push({
+            file: files[index],
+            error: result.reason?.message || 'Upload failed',
+          });
+        }
+      });
+
+      // Collect blob URLs for cleanup
+      files.forEach((f) => {
+        if (f.blobUrl) blobUrls.push(f.blobUrl);
+      });
+
+      return { uploaded, failed, blobUrls };
+    },
+    [chatType, agentId, channelId, toast]
+  );
+
+  const cleanupBlobUrls = useCallback((urls: string[]) => {
+    urls.forEach((url) => {
+      URL.revokeObjectURL(url);
+      blobUrlsRef.current.delete(url);
+    });
+  }, []);
+
+  const clearFiles = useCallback(() => {
+    // Cleanup all blob URLs
+    selectedFiles.forEach((file) => {
+      if (file.blobUrl) {
+        URL.revokeObjectURL(file.blobUrl);
+        blobUrlsRef.current.delete(file.blobUrl);
+      }
+    });
+    setSelectedFiles([]);
+  }, [selectedFiles]);
+
+  return {
+    selectedFiles,
+    setSelectedFiles,
+    handleFileChange,
+    removeFile,
+    createBlobUrls,
+    uploadFiles,
+    cleanupBlobUrls,
+    clearFiles,
+    getContentTypeFromMimeType,
+  };
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-onboarding.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import clientLogger from '../lib/logger';
+
+// Key for storing onboarding state in localStorage
+const ONBOARDING_COMPLETED_KEY = 'eliza-onboarding-completed';
+
+/**
+ * Custom hook to manage the onboarding state
+ * Tracks whether the user has completed the onboarding tour
+ */
+export const useOnboarding = () => {
+  // Check if user has completed the onboarding
+  const [onboardingCompleted, setOnboardingCompleted] = useState<boolean>(() => {
+    try {
+      // Try to get the stored value from localStorage
+      const storedValue = localStorage.getItem(ONBOARDING_COMPLETED_KEY);
+      return storedValue === 'true';
+    } catch (error) {
+      // If there's an error (e.g. localStorage not available), assume not completed
+      clientLogger.error('Error accessing localStorage:', error);
+      return false;
+    }
+  });
+
+  // Update localStorage when onboardingCompleted changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(ONBOARDING_COMPLETED_KEY, onboardingCompleted.toString());
+    } catch (error) {
+      clientLogger.error('Error writing to localStorage:', error);
+    }
+  }, [onboardingCompleted]);
+
+  // Function to mark onboarding as completed
+  const completeOnboarding = () => {
+    setOnboardingCompleted(true);
+  };
+
+  // Function to reset onboarding state (for testing)
+  const resetOnboarding = () => {
+    setOnboardingCompleted(false);
+  };
+
+  return {
+    onboardingCompleted,
+    completeOnboarding,
+    resetOnboarding,
+  };
+};