@elizaos/client 1.5.5-alpha.10

package/src/hooks/use-server-agents.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createElizaClient } from '@/lib/api-client-config';
+import { useToast } from '@/hooks/use-toast';
+import type { UUID } from '@elizaos/core';
+
+export function useAddAgentToServer() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ serverId, agentId }: { serverId: UUID; agentId: UUID }) => {
+      const elizaClient = createElizaClient();
+      return await elizaClient.agents.addAgentToServer(serverId, agentId);
+    },
+    onSuccess: (_data, variables) => {
+      // Invalidate server agents query
+      queryClient.invalidateQueries({ queryKey: ['serverAgents', variables.serverId] });
+      queryClient.invalidateQueries({ queryKey: ['agentServers', variables.agentId] });
+
+      toast({
+        title: 'Agent Added',
+        description: 'Agent has been successfully added to the server',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to add agent to server',
+        variant: 'destructive',
+      });
+    },
+  });
+}
+
+export function useRemoveAgentFromServer() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async ({ serverId, agentId }: { serverId: UUID; agentId: UUID }) => {
+      const elizaClient = createElizaClient();
+      return await elizaClient.agents.removeAgentFromServer(serverId, agentId);
+    },
+    onSuccess: (_data, variables) => {
+      // Invalidate server agents query
+      queryClient.invalidateQueries({ queryKey: ['serverAgents', variables.serverId] });
+      queryClient.invalidateQueries({ queryKey: ['agentServers', variables.agentId] });
+
+      toast({
+        title: 'Agent Removed',
+        description: 'Agent has been successfully removed from the server',
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to remove agent from server',
+        variant: 'destructive',
+      });
+    },
+  });
+}

package/src/hooks/use-server-version.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+import clientLogger from '../lib/logger';
+
+export interface ServerVersionInfo {
+  version: string;
+  source: string;
+  timestamp: string;
+  environment: string;
+  uptime: number;
+}
+
+/**
+ * Hook to fetch server version information from the API
+ */
+export function useServerVersion() {
+  return useQuery<ServerVersionInfo>({
+    queryKey: ['server-version'],
+    queryFn: async () => {
+      try {
+        const response = await fetch('/api/system/version');
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to fetch server version: ${response.status} ${response.statusText}`
+          );
+        }
+
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        clientLogger.error('Error fetching server version:', error);
+        throw error;
+      }
+    },
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  });
+}
+
+/**
+ * Hook that returns just the version string for backwards compatibility
+ */
+export function useServerVersionString() {
+  const { data } = useServerVersion();
+  return data?.version || '0.0.0-loading';
+}

package/src/hooks/use-sidebar-state.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect, useCallback } from 'react';
+import clientLogger from '@/lib/logger';
+
+// Key for storing sidebar visibility state in localStorage
+const SIDEBAR_STATE_KEY = 'eliza-agent-sidebar-visible';
+
+/**
+ * Custom hook to manage agent sidebar visibility state with localStorage persistence
+ * Remembers whether the sidebar should be open or closed across page refreshes
+ */
+export function useSidebarState() {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  // Load sidebar state from localStorage on mount
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(SIDEBAR_STATE_KEY);
+      if (stored !== null) {
+        const parsedState = JSON.parse(stored);
+        setIsVisible(parsedState);
+      }
+    } catch (error) {
+      clientLogger.error('Error reading sidebar state from localStorage:', error);
+      // Default to false if there's an error
+      setIsVisible(false);
+    }
+  }, []);
+
+  // Update sidebar state and persist to localStorage
+  const setSidebarVisible = useCallback((visible: boolean) => {
+    setIsVisible(visible);
+
+    try {
+      localStorage.setItem(SIDEBAR_STATE_KEY, JSON.stringify(visible));
+    } catch (error) {
+      clientLogger.error('Error saving sidebar state to localStorage:', error);
+    }
+  }, []);
+
+  // Toggle function for convenience
+  const toggleSidebar = useCallback(() => {
+    setSidebarVisible(!isVisible);
+  }, [isVisible, setSidebarVisible]);
+
+  return {
+    isVisible,
+    setSidebarVisible,
+    toggleSidebar,
+  };
+}

package/src/hooks/use-socket-chat.ts

@@ -0,0 +1,264 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { SocketIOManager } from '@/lib/socketio-manager';
+import type {
+  MessageBroadcastData,
+  MessageCompleteData,
+  ControlMessageData,
+  MessageDeletedData,
+  ChannelClearedData,
+  ChannelDeletedData,
+} from '@/lib/socketio-manager';
+import { UUID, Agent, ChannelType } from '@elizaos/core';
+import type { UiMessage } from './use-query-hooks';
+import { randomUUID } from '@/lib/utils';
+import clientLogger from '@/lib/logger';
+
+interface UseSocketChatProps {
+  channelId: UUID | undefined;
+  currentUserId: string;
+  contextId: UUID; // agentId for DM, channelId for GROUP
+  chatType: ChannelType.DM | ChannelType.GROUP;
+  allAgents: Agent[];
+  messages: UiMessage[];
+  onAddMessage: (message: UiMessage) => void;
+  onUpdateMessage: (messageId: string, updates: Partial<UiMessage>) => void;
+  onDeleteMessage: (messageId: string) => void;
+  onClearMessages: () => void;
+  onInputDisabledChange: (disabled: boolean) => void;
+}
+
+export function useSocketChat({
+  channelId,
+  currentUserId,
+  contextId,
+  chatType,
+  allAgents,
+  messages,
+  onAddMessage,
+  onUpdateMessage,
+  onDeleteMessage,
+  onClearMessages,
+  onInputDisabledChange,
+}: UseSocketChatProps) {
+  const socketIOManager = SocketIOManager.getInstance();
+  const animatedMessageIdRef = useRef<string | null>(null);
+  const joinedChannelRef = useRef<string | null>(null); // Ref to track joined channel
+
+  const sendMessage = useCallback(
+    async (
+      text: string,
+      serverId: UUID,
+      source: string,
+      attachments?: any[],
+      tempMessageId?: string,
+      metadata?: Record<string, any>,
+      overrideChannelId?: UUID
+    ) => {
+      const channelIdToUse = overrideChannelId || channelId;
+      if (!channelIdToUse) {
+        clientLogger.error('[useSocketChat] Cannot send message: no channel ID available');
+        return;
+      }
+
+      // Add metadata for DM channels
+      const messageMetadata = {
+        ...metadata,
+        channelType: chatType,
+        ...(chatType === ChannelType.DM && {
+          isDm: true,
+          targetUserId: contextId, // The agent ID for DM channels
+        }),
+      };
+
+      await socketIOManager.sendMessage(
+        text,
+        channelIdToUse,
+        serverId,
+        source,
+        attachments,
+        tempMessageId,
+        messageMetadata
+      );
+    },
+    [channelId, socketIOManager, chatType, contextId]
+  );
+
+  useEffect(() => {
+    if (!channelId || !currentUserId) {
+      // If channelId becomes undefined (e.g., navigating away), ensure we reset the ref
+      if (joinedChannelRef.current) {
+        clientLogger.info(
+          `[useSocketChat] useEffect: channelId is now null/undefined, resetting joinedChannelRef from ${joinedChannelRef.current}`
+        );
+        joinedChannelRef.current = null;
+      }
+      return;
+    }
+
+    socketIOManager.initialize(currentUserId); // Initialize on user context
+
+    // Only join if this specific channelId hasn't been joined by this hook instance yet,
+    // or if the channelId has changed.
+    if (channelId !== joinedChannelRef.current) {
+      clientLogger.info(
+        `[useSocketChat] useEffect: Joining channel ${channelId}. Previous joinedChannelRef: ${joinedChannelRef.current}`
+      );
+      socketIOManager.joinChannel(channelId);
+      joinedChannelRef.current = channelId; // Mark this channelId as joined by this instance
+    } else {
+      clientLogger.info(
+        `[useSocketChat] useEffect: Channel ${channelId} already marked as joined by this instance. Skipping joinChannel call.`
+      );
+    }
+
+    const handleMessageBroadcasting = (data: MessageBroadcastData) => {
+      clientLogger.info(
+        '[useSocketChat] Received raw messageBroadcast data:',
+        JSON.stringify(data)
+      );
+      const msgChannelId = data.channelId || data.roomId;
+      if (msgChannelId !== channelId) return;
+      const isCurrentUser = data.senderId === currentUserId;
+
+      // Unified message handling for both DM and GROUP
+      const isTargetAgent =
+        chatType === ChannelType.DM
+          ? data.senderId === contextId
+          : allAgents.some((agent) => agent.id === data.senderId);
+
+      if (!isCurrentUser && isTargetAgent) onInputDisabledChange(false);
+
+      const clientMessageId = (data as any).clientMessageId;
+      if (clientMessageId && isCurrentUser) {
+        // Update optimistic message with server response
+        onUpdateMessage(clientMessageId, {
+          id: data.id || randomUUID(),
+          isLoading: false,
+          createdAt:
+            typeof data.createdAt === 'number' ? data.createdAt : Date.parse(data.createdAt),
+          text: data.text,
+          attachments: data.attachments,
+          isAgent: false,
+        });
+      } else {
+        // Add new message from other participants
+        const newUiMsg: UiMessage = {
+          id: data.id || randomUUID(),
+          text: data.text,
+          name: data.senderName,
+          senderId: data.senderId as UUID,
+          isAgent: isTargetAgent,
+          createdAt:
+            typeof data.createdAt === 'number' ? data.createdAt : Date.parse(data.createdAt),
+          channelId: (data.channelId || data.roomId) as UUID,
+          serverId: data.serverId as UUID | undefined,
+          source: data.source,
+          attachments: data.attachments,
+          thought: data.thought,
+          actions: data.actions,
+          isLoading: false,
+          prompt: data.prompt,
+          rawMessage: data.rawMessage,
+        };
+
+        // Check if message already exists
+        const messageExists = messages.some((m) => m.id === data.id);
+        if (!messageExists) {
+          clientLogger.info('[useSocketChat] Adding new UiMessage:', JSON.stringify(newUiMsg));
+          onAddMessage(newUiMsg);
+
+          if (isTargetAgent && newUiMsg.id) {
+            animatedMessageIdRef.current = newUiMsg.id;
+          } else {
+            animatedMessageIdRef.current = null;
+          }
+        }
+      }
+    };
+
+    const handleMessageComplete = (data: MessageCompleteData) => {
+      const completeChannelId = data.channelId || data.roomId;
+      if (completeChannelId === channelId) onInputDisabledChange(false);
+    };
+
+    const handleControlMessage = (data: ControlMessageData) => {
+      const ctrlChannelId = data.channelId || data.roomId;
+      if (ctrlChannelId === channelId) {
+        if (data.action === 'disable_input') onInputDisabledChange(true);
+        else if (data.action === 'enable_input') onInputDisabledChange(false);
+      }
+    };
+
+    const handleMessageDeleted = (data: MessageDeletedData) => {
+      const deletedChannelId = data.channelId || data.roomId;
+      if (deletedChannelId === channelId && data.messageId) {
+        onDeleteMessage(data.messageId);
+      }
+    };
+
+    const handleChannelCleared = (data: ChannelClearedData) => {
+      const clearedChannelId = data.channelId || data.roomId;
+      if (clearedChannelId === channelId) {
+        onClearMessages();
+      }
+    };
+
+    const handleChannelDeleted = (data: ChannelDeletedData) => {
+      const deletedChannelId = data.channelId || data.roomId;
+      if (deletedChannelId === channelId) {
+        onClearMessages();
+      }
+    };
+
+    const msgSub = socketIOManager.evtMessageBroadcast.attach(
+      (d: MessageBroadcastData) => (d.channelId || d.roomId) === channelId,
+      handleMessageBroadcasting
+    );
+    const completeSub = socketIOManager.evtMessageComplete.attach(
+      (d: MessageCompleteData) => (d.channelId || d.roomId) === channelId,
+      handleMessageComplete
+    );
+    const controlSub = socketIOManager.evtControlMessage.attach(
+      (d: ControlMessageData) => (d.channelId || d.roomId) === channelId,
+      handleControlMessage
+    );
+    const deleteSub = socketIOManager.evtMessageDeleted.attach(
+      (d: MessageDeletedData) => (d.channelId || d.roomId) === channelId,
+      handleMessageDeleted
+    );
+    const clearSub = socketIOManager.evtChannelCleared.attach(
+      (d: ChannelClearedData) => (d.channelId || d.roomId) === channelId,
+      handleChannelCleared
+    );
+    const deletedSub = socketIOManager.evtChannelDeleted.attach(
+      (d: ChannelDeletedData) => (d.channelId || d.roomId) === channelId,
+      handleChannelDeleted
+    );
+
+    return () => {
+      if (channelId) {
+        clientLogger.info(
+          `[useSocketChat] useEffect cleanup: Leaving channel ${channelId}. Current joinedChannelRef: ${joinedChannelRef.current}`
+        );
+        socketIOManager.leaveChannel(channelId);
+        // Reset ref when component unmounts or channelId changes leading to cleanup
+        if (channelId === joinedChannelRef.current) {
+          joinedChannelRef.current = null;
+          clientLogger.info(
+            `[useSocketChat] useEffect cleanup: Reset joinedChannelRef for ${channelId}`
+          );
+        }
+      }
+      detachSubscriptions([msgSub, completeSub, controlSub, deleteSub, clearSub, deletedSub]);
+    };
+
+    function detachSubscriptions(subscriptions: Array<{ detach: () => void } | undefined>) {
+      subscriptions.forEach((sub) => sub?.detach());
+    }
+  }, [channelId, currentUserId, socketIOManager]);
+
+  return {
+    sendMessage,
+    animatedMessageId: animatedMessageIdRef.current,
+  };
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,260 @@
+import * as React from 'react';
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 3000; // 3 seconds auto-dismiss
+
+/**
+ * Represents a toast object with additional properties.
+ * @typedef {Object} ToasterToast
+ * @property {string} id - The unique identifier of the toast.
+ * @property {React.ReactNode} [title] - The title displayed in the toast.
+ * @property {React.ReactNode} [description] - The description displayed in the toast.
+ * @property {ToastActionElement} [action] - The action element displayed in the toast.
+ */
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+/**
+ * Variable to hold the count value.
+ */
+let count = 0;
+
+/**
+ * Generates a unique ID string each time it is called.
+ *
+ * @returns {string} The generated ID string.
+ */
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+/**
+ * Define a type ActionType that is based on the values of the actionTypes object.
+ */
+type ActionType = typeof actionTypes;
+
+/**
+ * Represents different types of actions that can be dispatched to
+ * manipulate the state of a toaster toast.
+ * @typedef {Object} Action
+ * @property {ActionType["ADD_TOAST"]} type - The type of action to add a new toast.
+ * @property {ToasterToast} toast - The toast to add.
+ * @property {ActionType["UPDATE_TOAST"]} type - The type of action to update an existing toast.
+ * @property {Partial<ToasterToast>} toast - The updated fields of the toast.
+ * @property {ActionType["DISMISS_TOAST"]} type - The type of action to dismiss a toast.
+ * @property {ToasterToast["id"]} [toastId] - The ID of the toast to dismiss.
+ * @property {ActionType["REMOVE_TOAST"]} type - The type of action to remove a toast.
+ * @property {ToasterToast["id"]} [toastId] - The ID of the toast to remove.
+ */
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+/**
+ * Interface representing the state object with an array of toasts.
+ */
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+/**
+ * Adds a toast to the removal queue with a specified toast ID.
+ * If the toast ID already exists in the queue, it will not be added again.
+ * Once the timeout period specified by TOAST_REMOVE_DELAY has elapsed, the toast will be removed from the queue.
+ *
+ * @param {string} toastId - The unique identifier for the toast to be added to the removal queue
+ */
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+/**
+ * Reducer function to handle various actions on the state related to toasts.
+ * @param {State} state - The current state of the application.
+ * @param {Action} action - The action to be performed on the state.
+ * @returns {State} - The updated state after performing the action.
+ */
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        for (const toast of state.toasts) {
+          addToRemoveQueue(toast.id);
+        }
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+/**
+ * Defines a variable to store the memory state, initialized with an empty array for toasts.
+ */
+let memoryState: State = { toasts: [] };
+
+/**
+ * Dispatches an action by passing it to the reducer function and then
+ * notifies all registered listeners with the updated memory state.
+ *
+ * @param {Action} action The action to dispatch
+ */
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  for (const listener of listeners) {
+    listener(memoryState);
+  }
+}
+
+/**
+ * Represents a Toast object without the "id" property.
+ */
+type Toast = Omit<ToasterToast, 'id'>;
+
+/**
+ * Creates a new toast message with the given properties.
+ * @param {Toast} props - The props for the toast message.
+ * @returns {Object} An object containing the id of the toast, a function to dismiss the toast, and a function to update the toast.
+ */
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+/**
+ * Custom hook for managing toast messages.
+ *
+ * @returns {{
+ *   showToast: Function,
+ *   dismiss: Function,
+ * }}
+ */
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, []);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };