@elizaos/client 1.5.5-alpha.10

package/src/hooks/use-version.tsx

@@ -0,0 +1,64 @@
+import { ToastAction } from '@/components/ui/toast';
+import { useEffect, useCallback } from 'react';
+import { NavLink } from 'react-router';
+import semver from 'semver';
+import { useToast } from './use-toast';
+import { useServerVersion } from './use-server-version';
+import clientLogger from '../lib/logger';
+
+export default function useVersion() {
+  const { toast } = useToast();
+  const { data: versionInfo } = useServerVersion();
+
+  async function getLatestRelease(repo: string) {
+    const apiUrl = `https://api.github.com/repos/${repo}/releases/latest`;
+
+    try {
+      const response = await fetch(apiUrl, {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          'User-Agent': 'fetch-latest-release',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch latest release: ${response.status} ${response.statusText}`
+        );
+      }
+
+      const data = await response.json();
+      const latestVersion = data.tag_name;
+      return latestVersion;
+    } catch {}
+  }
+
+  const compareVersion = useCallback(async () => {
+    try {
+      const latestVersion = await getLatestRelease('elizaos/eliza');
+      const thisVersion = versionInfo?.version;
+      if (latestVersion && thisVersion) {
+        if (semver.gt(latestVersion.replace('v', ''), thisVersion.replace('v', ''))) {
+          toast({
+            variant: 'default',
+            title: `New version ${latestVersion} is available.`,
+            description: 'Visit GitHub for more information.',
+            action: (
+              <NavLink to="https://github.com/elizaos/eliza/releases" target="_blank">
+                <ToastAction altText="Update">Update</ToastAction>
+              </NavLink>
+            ),
+          });
+        }
+      }
+    } catch (e) {
+      clientLogger.error(`Unable to retrieve latest version from GitHub: ${e}`);
+    }
+  }, [toast, versionInfo?.version]);
+
+  useEffect(() => {
+    compareVersion();
+  }, [compareVersion]);
+
+  return null;
+}

package/src/index.css

@@ -0,0 +1,146 @@
+@import 'tailwindcss';
+@config "../tailwind.config.ts";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 93%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 97%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 1rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 12%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 14%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 10%;
+    --secondary: 0 0% 16%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 16%;
+    --muted-foreground: 0 0% 64%;
+    --accent: 0 0% 16%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 20%;
+    --input: 0 0% 14%;
+    --ring: 0 0% 83.9%;
+    --sidebar-background: 0 0% 12%;
+    --sidebar-foreground: 0 0% 95%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 16%;
+    --sidebar-accent-foreground: 0 0% 95%;
+    --sidebar-border: 0 0% 20%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari, Opera */
+}
+
+/* Custom scrollbar styles for visible scrollbars (like Railway) */
+.scrollbar-visible {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(156, 163, 175) rgb(243, 244, 246);
+}
+
+.scrollbar-visible::-webkit-scrollbar {
+  height: 8px;
+  display: block;
+}
+
+.scrollbar-visible::-webkit-scrollbar-track {
+  background-color: rgb(243, 244, 246);
+  border-radius: 9999px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb {
+  background-color: rgb(156, 163, 175);
+  border-radius: 9999px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(107, 114, 128);
+}
+
+/* Dark mode styles */
+.dark .scrollbar-visible {
+  scrollbar-color: rgb(75, 85, 99) rgb(31, 41, 55);
+}
+
+.dark .scrollbar-visible::-webkit-scrollbar-track {
+  background-color: rgb(31, 41, 55);
+}
+
+.dark .scrollbar-visible::-webkit-scrollbar-thumb {
+  background-color: rgb(75, 85, 99);
+}
+
+.dark .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(107, 114, 128);
+}
+
+@utility container {
+  margin-inline: auto;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/lib/api-client-config.ts

@@ -0,0 +1,53 @@
+import { ElizaClient, type ApiClientConfig } from '@elizaos/api-client';
+
+export function createApiClientConfig(): ApiClientConfig {
+  const getLocalStorageApiKey = () => `eliza-api-key-${window.location.origin}`;
+  const apiKey = localStorage.getItem(getLocalStorageApiKey());
+
+  const config: ApiClientConfig = {
+    baseUrl: window.location.origin,
+    timeout: 30000,
+    headers: {
+      Accept: 'application/json',
+    },
+  };
+
+  // Only include apiKey if it exists (don't pass undefined)
+  if (apiKey) {
+    config.apiKey = apiKey;
+  }
+
+  return config;
+}
+
+// Singleton instance
+let elizaClientInstance: ElizaClient | null = null;
+
+export function createElizaClient(): ElizaClient {
+  if (!elizaClientInstance) {
+    elizaClientInstance = ElizaClient.create(createApiClientConfig());
+  }
+  return elizaClientInstance;
+}
+
+export function getElizaClient(): ElizaClient {
+  return createElizaClient();
+}
+
+// Function to reset the singleton (useful for API key changes)
+export function resetElizaClient(): void {
+  elizaClientInstance = null;
+}
+
+export function updateApiClientApiKey(newApiKey: string | null): void {
+  const getLocalStorageApiKey = () => `eliza-api-key-${window.location.origin}`;
+
+  if (newApiKey) {
+    localStorage.setItem(getLocalStorageApiKey(), newApiKey);
+  } else {
+    localStorage.removeItem(getLocalStorageApiKey());
+  }
+
+  // Reset the singleton so it uses the new API key
+  resetElizaClient();
+}

package/src/lib/api-type-mappers.ts

@@ -0,0 +1,196 @@
+import {
+  Agent as ApiAgent,
+  AgentLog as ApiAgentLog,
+  Message as ApiMessage,
+  MessageChannel as ApiMessageChannel,
+  MessageServer as ApiMessageServer,
+  Memory as ApiMemory,
+} from '@elizaos/api-client';
+import { Agent, AgentStatus, UUID, ChannelType, Memory } from '@elizaos/core';
+import type {
+  AgentWithStatus,
+  MessageChannel as ClientMessageChannel,
+  MessageServer as ClientMessageServer,
+  ServerMessage,
+} from '../types';
+import type { UiMessage } from '../hooks/use-query-hooks';
+
+// Map API Agent status strings to core AgentStatus enum
+export function mapApiStatusToEnum(status: 'active' | 'inactive' | 'stopped'): AgentStatus {
+  switch (status) {
+    case 'active':
+      return AgentStatus.ACTIVE;
+    case 'inactive':
+    case 'stopped': // Map stopped to inactive since core doesn't have STOPPED
+      return AgentStatus.INACTIVE;
+    default:
+      return AgentStatus.INACTIVE;
+  }
+}
+
+// Map core AgentStatus enum to API status strings
+export function mapEnumToApiStatus(status: AgentStatus): 'active' | 'inactive' | 'stopped' {
+  switch (status) {
+    case AgentStatus.ACTIVE:
+      return 'active';
+    case AgentStatus.INACTIVE:
+      return 'inactive';
+    default:
+      return 'inactive';
+  }
+}
+
+// Convert API Agent to client AgentWithStatus
+export function mapApiAgentToClient(apiAgent: ApiAgent): AgentWithStatus {
+  return {
+    ...apiAgent,
+    id: apiAgent.id as UUID,
+    status: mapApiStatusToEnum(apiAgent.status),
+    createdAt:
+      apiAgent.createdAt instanceof Date
+        ? apiAgent.createdAt.getTime()
+        : new Date(apiAgent.createdAt).getTime(),
+    updatedAt:
+      apiAgent.updatedAt instanceof Date
+        ? apiAgent.updatedAt.getTime()
+        : new Date(apiAgent.updatedAt).getTime(),
+  } as AgentWithStatus;
+}
+
+// Convert Date to string for API
+export function dateToApiString(date: Date | string | number): string {
+  if (date instanceof Date) {
+    return date.toISOString();
+  }
+  if (typeof date === 'number') {
+    return new Date(date).toISOString();
+  }
+  return date;
+}
+
+// Convert API date (Date object or string) to timestamp (ms)
+export function apiDateToTimestamp(date: Date | string | number): number {
+  if (date instanceof Date) {
+    return date.getTime();
+  }
+  if (typeof date === 'string') {
+    return new Date(date).getTime();
+  }
+  return date;
+}
+
+// Convert API date to string
+export function apiDateToString(date: Date | string): string {
+  if (date instanceof Date) {
+    return date.toISOString();
+  }
+  return date;
+}
+
+// Map API MessageChannel to client MessageChannel
+export function mapApiChannelToClient(apiChannel: ApiMessageChannel): ClientMessageChannel {
+  return {
+    ...apiChannel,
+    id: apiChannel.id as UUID,
+    messageServerId: apiChannel.messageServerId as UUID,
+    type: apiChannel.type as ChannelType,
+    createdAt: apiDateToString(apiChannel.createdAt),
+    updatedAt: apiDateToString(apiChannel.updatedAt),
+  };
+}
+
+// Map API MessageServer to client MessageServer
+export function mapApiServerToClient(apiServer: ApiMessageServer): ClientMessageServer {
+  return {
+    ...apiServer,
+    id: apiServer.id as UUID,
+    createdAt: apiDateToString(apiServer.createdAt),
+    updatedAt: apiDateToString(apiServer.updatedAt),
+  };
+}
+
+// Map array of API Servers to client MessageServers
+export function mapApiServersToClient(apiServers: ApiMessageServer[]): ClientMessageServer[] {
+  return apiServers.map(mapApiServerToClient);
+}
+
+// Map array of API Channels to client MessageChannels
+export function mapApiChannelsToClient(apiChannels: ApiMessageChannel[]): ClientMessageChannel[] {
+  return apiChannels.map(mapApiChannelToClient);
+}
+
+// Map API Message to UiMessage
+export function mapApiMessageToUi(apiMessage: ApiMessage, serverId?: UUID): UiMessage {
+  // Ensure attachments are properly typed as Media[]
+  const attachments =
+    apiMessage.metadata?.attachments?.map((att: any) => ({
+      id: att.id || crypto.randomUUID(),
+      url: att.url,
+      title: att.title || att.name,
+      source: att.source,
+      description: att.description,
+      text: att.text,
+      contentType: att.contentType || att.type,
+    })) || undefined;
+
+  const messageType = apiMessage.sourceType;
+  const rawMessage = apiMessage.rawMessage;
+  return {
+    id: apiMessage.id as UUID,
+    text: apiMessage.content,
+    name: apiMessage.metadata?.authorDisplayName || apiMessage.metadata?.agentName || 'Unknown',
+    senderId: apiMessage.authorId as UUID,
+    isAgent: Boolean(apiMessage.metadata?.isAgent) || false,
+    createdAt: apiDateToTimestamp(apiMessage.createdAt),
+    channelId: apiMessage.channelId as UUID,
+    serverId: serverId || (apiMessage.metadata?.serverId as UUID),
+    prompt: apiMessage.metadata?.prompt,
+    attachments,
+    thought: apiMessage.metadata?.thought,
+    actions: apiMessage.metadata?.actions,
+    type: messageType,
+    rawMessage: rawMessage,
+  };
+}
+
+// Map API AgentLog to client format
+export function mapApiLogToClient(apiLog: ApiAgentLog): AgentLog {
+  return {
+    id: apiLog.id,
+    type: apiLog?.type || apiLog.body?.modelType,
+    timestamp: apiLog.timestamp ? apiDateToTimestamp(apiLog.timestamp) : undefined,
+    message: apiLog.message,
+    details: apiLog.details,
+    roomId: apiLog.roomId,
+    body: apiLog.body,
+    createdAt: apiLog.createdAt ? apiDateToTimestamp(apiLog.createdAt) : undefined,
+  };
+}
+
+// Type for client-side AgentLog
+export interface AgentLog {
+  id?: UUID;
+  type?: string;
+  timestamp?: number;
+  message?: string;
+  details?: string;
+  roomId?: UUID;
+  body?: any;
+  createdAt?: number;
+}
+
+// Map API Memory to client Memory
+export function mapApiMemoryToClient(apiMemory: ApiMemory): Memory {
+  return {
+    id: apiMemory.id as UUID,
+    entityId: (apiMemory.metadata?.entityId ||
+      apiMemory.metadata?.userId ||
+      apiMemory.agentId) as UUID,
+    agentId: apiMemory.agentId as UUID,
+    content: apiMemory.content,
+    embedding: apiMemory.embedding,
+    roomId: apiMemory.roomId as UUID,
+    createdAt: apiDateToTimestamp(apiMemory.createdAt),
+    unique: apiMemory.metadata?.unique,
+  };
+}

package/src/lib/export-utils.ts

@@ -0,0 +1,123 @@
+import type { Agent } from '@elizaos/core';
+
+export interface ExportResult {
+  success: boolean;
+  filename?: string;
+  error?: string;
+}
+
+export interface ToastFunction {
+  (options: { title: string; description: string; variant?: 'default' | 'destructive' }): void;
+}
+
+/**
+ * Sanitizes a filename by replacing non-alphanumeric characters with dashes
+ * and cleaning up multiple consecutive dashes
+ */
+export function sanitizeFilename(name: string): string {
+  return name
+    .replace(/[^a-zA-Z0-9]/g, '-') // Replace non-alphanumeric with dash
+    .replace(/-+/g, '-') // Replace multiple consecutive dashes with single dash
+    .replace(/^-|-$/g, '') // Remove leading/trailing dashes
+    .toLowerCase();
+}
+
+/**
+ * Converts an agent to character JSON data, excluding sensitive information
+ */
+export function agentToCharacterData(agent: Agent): Record<string, any> {
+  const characterData = {
+    id: agent.id,
+    name: agent.name,
+    username: agent.username,
+    system: agent.system,
+    templates: agent.templates,
+    bio: agent.bio,
+    messageExamples: agent.messageExamples,
+    postExamples: agent.postExamples,
+    topics: agent.topics,
+    adjectives: agent.adjectives,
+    knowledge: agent.knowledge,
+    plugins: agent.plugins,
+    settings: agent.settings ? { ...agent.settings } : undefined,
+    style: agent.style,
+  };
+
+  // Remove secrets from settings if they exist
+  if (characterData.settings && 'secrets' in characterData.settings) {
+    const { secrets, ...settingsWithoutSecrets } = characterData.settings;
+    characterData.settings = settingsWithoutSecrets;
+  }
+
+  // Remove undefined/null fields to keep JSON clean
+  return Object.fromEntries(
+    Object.entries(characterData).filter(([_, value]) => value !== undefined && value !== null)
+  );
+}
+
+/**
+ * Generates a filename for the exported character
+ */
+export function generateExportFilename(agentName: string): string {
+  const date = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
+  const sanitizedName = sanitizeFilename(agentName || 'agent');
+  return `${sanitizedName}-${date}.json`;
+}
+
+/**
+ * Creates and triggers a download of a JSON file
+ */
+export function downloadJsonFile(data: any, filename: string): void {
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: 'application/json',
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Exports an agent's character data as a JSON file download
+ * @param agent - The agent containing the character data to export
+ * @param toast - Optional toast function for notifications
+ * @returns Export result with success status and filename or error
+ */
+export function exportCharacterAsJson(agent: Agent, toast?: ToastFunction): ExportResult {
+  try {
+    const characterData = agentToCharacterData(agent);
+    const filename = generateExportFilename(agent.name);
+
+    downloadJsonFile(characterData, filename);
+
+    // Success notification
+    if (toast) {
+      toast({
+        title: 'Character Exported',
+        description: `${agent.name}'s character data has been downloaded as ${filename}`,
+      });
+    }
+
+    return { success: true, filename };
+  } catch (error) {
+    console.error('Failed to export character:', error);
+
+    // Error notification
+    if (toast) {
+      toast({
+        title: 'Export Failed',
+        description: 'Failed to export character data. Please try again.',
+        variant: 'destructive',
+      });
+    }
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error',
+    };
+  }
+}

package/src/lib/logger.ts

@@ -0,0 +1,19 @@
+import { elizaLogger } from '@elizaos/core';
+
+// Add client-specific context to logs
+const clientLogger = {
+  info: (msg: string, ...args: any[]) => {
+    elizaLogger.info({ source: 'client' }, msg, ...args);
+  },
+  error: (msg: string, ...args: any[]) => {
+    elizaLogger.error({ source: 'client' }, msg, ...args);
+  },
+  warn: (msg: string, ...args: any[]) => {
+    elizaLogger.warn({ source: 'client' }, msg, ...args);
+  },
+  debug: (msg: string, ...args: any[]) => {
+    elizaLogger.debug({ source: 'client' }, msg, ...args);
+  },
+};
+
+export default clientLogger;