@elizaos/client 1.5.5-alpha.10

package/src/lib/utils.ts

@@ -0,0 +1,168 @@
+import { AVATAR_IMAGE_MAX_SIZE } from '@/constants';
+import type { UUID } from '@elizaos/core';
+import { type ClassValue, clsx } from 'clsx';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { twMerge } from 'tailwind-merge';
+import type { Agent, UUID as CoreUUID } from '@elizaos/core';
+import type { MessageChannel as ClientMessageChannel } from '@/types';
+
+/**
+ * Combines multiple class names into a single string.
+ * * @param {...ClassValue} inputs - Array of class names to be combined.
+ * @returns { string } - Combined class names as a single string.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+dayjs.extend(localizedFormat);
+
+export const moment = dayjs;
+
+export const formatAgentName = (name: string) => {
+  return name.substring(0, 2);
+};
+
+/**
+ * Converts a character name to a URL-friendly format by replacing spaces with hyphens
+ */
+/**
+ * Converts a character name to a URL-friendly format by replacing spaces with hyphens.
+ *
+ * @param {string} name - The name of the character to convert.
+ * @returns {string} The URL-friendly version of the character name.
+ */
+export function characterNameToUrl(name: string): string {
+  return name.replace(/\s+/g, '-');
+}
+
+/**
+ * Converts a URL-friendly character name back to its original format by replacing hyphens with spaces
+ */
+export function urlToCharacterName(urlName: string): string {
+  return urlName.replace(/-+/g, ' ');
+}
+
+// crypto.randomUUID only works in https context in firefox
+export function randomUUID(): UUID {
+  return URL.createObjectURL(new Blob()).split('/').pop() as UUID;
+}
+
+export function getEntityId(): UUID {
+  const USER_ID_KEY = 'elizaos-client-user-id';
+  const existingUserId = localStorage.getItem(USER_ID_KEY);
+
+  if (existingUserId) {
+    return existingUserId as UUID;
+  }
+
+  const newUserId = randomUUID() as UUID;
+  localStorage.setItem(USER_ID_KEY, newUserId);
+
+  return newUserId;
+}
+
+export const compressImage = (
+  file: File,
+  maxSize = AVATAR_IMAGE_MAX_SIZE,
+  quality = 0.8
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        const img = new Image();
+        img.src = e.target.result as string;
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          let width = img.width;
+          let height = img.height;
+
+          if (width > height) {
+            if (width > maxSize) {
+              height *= maxSize / width;
+              width = maxSize;
+            }
+          } else {
+            if (height > maxSize) {
+              width *= maxSize / height;
+              height = maxSize;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext('2d');
+          ctx?.drawImage(img, 0, 0, width, height);
+          const resizedBase64 = canvas.toDataURL('image/jpeg', quality);
+
+          resolve(resizedBase64);
+        };
+        img.onerror = reject;
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+
+const AGENT_AVATAR_PLACEHOLDERS = [
+  '/images/agents/agent1.png', // Assuming these exist
+  '/images/agents/agent2.png',
+  '/images/agents/agent3.png',
+  '/images/agents/agent4.png',
+  '/images/agents/agent5.png',
+];
+
+export const getAgentAvatar = (
+  agent: { id?: UUID; settings?: { avatar?: string | null } } | undefined
+): string => {
+  if (agent?.settings?.avatar) {
+    return agent.settings.avatar;
+  }
+  if (agent?.id) {
+    // Simple deterministic assignment based on agent ID
+    let hash = 0;
+    for (let i = 0; i < agent.id.length; i++) {
+      const char = agent.id.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash |= 0; // Convert to 32bit integer
+    }
+    const index = Math.abs(hash) % AGENT_AVATAR_PLACEHOLDERS.length;
+    return AGENT_AVATAR_PLACEHOLDERS[index];
+  }
+  // Fallback if no ID or other issue, or if AGENT_AVATAR_PLACEHOLDERS is empty
+  return '/elizaos-icon.png';
+};
+
+export const generateGroupName = (
+  channel: Partial<ClientMessageChannel> | undefined,
+  participants: Partial<Agent>[] | undefined,
+  currentUserId: CoreUUID | string | undefined
+): string => {
+  if (channel?.name && channel.name.trim() !== '') {
+    return channel.name;
+  }
+  if (participants && participants.length > 0) {
+    const otherParticipants = participants.filter((p) => p.id !== currentUserId && p.name); // Ensure name exists
+    if (
+      otherParticipants.length === 0 &&
+      participants.some((p) => p.id === currentUserId && p.name)
+    ) {
+      // If only current user is a participant (and has a name), or no other named participants
+      const currentUserParticipant = participants.find((p) => p.id === currentUserId);
+      if (currentUserParticipant) return currentUserParticipant.name || 'Unnamed Group';
+      return 'Unnamed Group'; // Fallback if current user somehow has no name
+    }
+    if (otherParticipants.length > 0) {
+      return (
+        otherParticipants
+          .map((p) => p.name)
+          .slice(0, 3)
+          .join(', ') + (otherParticipants.length > 3 ? '...' : '')
+      );
+    }
+  }
+  return 'Unnamed Group';
+};

package/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
+
+const rootElement = document.getElementById('root');
+
+if (!rootElement) {
+  throw new Error('Root element not found');
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/mocks/empty-module.ts

@@ -0,0 +1,12 @@
+// Browser stub for Node-only modules (e.g., @sentry/node, @sentry/node-core)
+// Provides explicit no-op implementations to avoid runtime errors during bundling.
+
+export function init(_opts?: any): void {}
+export function captureException(_err?: any): void {}
+export async function flush(_timeout?: number): Promise<boolean> {
+  return true;
+}
+
+// Some consumers might import a namespace object. Provide a default export too.
+const defaultExport = { init, captureException, flush };
+export default defaultExport;

package/src/mocks/node-module.ts

@@ -0,0 +1,57 @@
+/**
+ * Mock for Node.js module API for browser compatibility
+ * This provides stub implementations for Node.js module functions
+ * that don't exist in the browser environment
+ */
+
+// Track warned modules to avoid spamming console
+const warnedModules = new Set<string>();
+
+// Mock createRequire function that returns appropriate polyfills
+export const createRequire = (_url?: string) => {
+  // Return a mock require function that provides polyfills
+  return (id: string) => {
+    // Only warn once per module
+    if (!warnedModules.has(id)) {
+      warnedModules.add(id);
+      console.debug(`Browser polyfill: Redirecting require('${id}') to browser-compatible version`);
+    }
+
+    // Return appropriate polyfills for known modules
+    if (id === 'crypto' || id === 'node:crypto') {
+      // Return the crypto-browserify polyfill if available
+      if (typeof window !== 'undefined' && (window as any).crypto) {
+        return (window as any).crypto;
+      }
+      return {};
+    }
+
+    if (id === 'buffer' || id === 'node:buffer') {
+      // Return the buffer polyfill if available
+      if (typeof window !== 'undefined' && (window as any).Buffer) {
+        return { Buffer: (window as any).Buffer };
+      }
+      return {};
+    }
+
+    return {};
+  };
+};
+
+// Mock module object
+export const Module = {
+  createRequire,
+  _extensions: {},
+  _cache: {},
+  _pathCache: {},
+  _nodeModulePaths: () => [],
+  globalPaths: [],
+  syncBuiltinESMExports: () => {},
+  isBuiltin: (_module: string) => false,
+};
+
+// Export as default for compatibility
+export default {
+  createRequire,
+  Module,
+};

package/src/polyfills.ts

@@ -0,0 +1,37 @@
+// Minimal, robust browser shims for Node globals that some deps expect
+import { Buffer } from 'buffer';
+
+// Ensure globalThis is used as the single global
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const g: any =
+  typeof globalThis !== 'undefined'
+    ? globalThis
+    : typeof window !== 'undefined'
+      ? window
+      : // @ts-ignore
+        typeof global !== 'undefined'
+        ? global
+        : {};
+
+if (!g.Buffer) {
+  g.Buffer = Buffer;
+}
+
+if (!g.global) {
+  g.global = g;
+}
+
+if (!g.process) {
+  g.process = {
+    env: {},
+    browser: true,
+    version: '',
+    versions: {},
+    nextTick: (cb: (...args: any[]) => void) =>
+      Promise.resolve()
+        .then(cb)
+        .catch(() => setTimeout(cb, 0)),
+  };
+}
+
+export {};

package/src/routes/agent-detail.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useAgent } from '@/hooks/use-query-hooks';
+import { UUID } from '@elizaos/core';
+
+const AgentDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data, isLoading, error } = useAgent((id as UUID) || null);
+
+  if (isLoading) return <div>Loading agent details...</div>;
+  if (error) return <div>Error loading agent: {(error as Error).message}</div>;
+  if (!data?.data) return <div>Agent not found</div>;
+
+  const agent = data.data;
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">{agent.name}</h1>
+      <div className="grid gap-4">
+        <div className="border rounded-lg p-4 shadow-sm">
+          <h2 className="text-xl font-semibold">Agent Details</h2>
+          <p className="text-sm text-gray-500">ID: {agent.id}</p>
+          {/* Add more agent details here */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentDetail;

package/src/routes/agent-list.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useAgents } from '@/hooks/use-query-hooks';
+import type { AgentWithStatus } from '@/types';
+
+const AgentList: React.FC = () => {
+  const { data, isLoading, error } = useAgents();
+  const agents = data?.data?.agents || [];
+
+  if (isLoading) return <div>Loading agents...</div>;
+  if (error) return <div>Error loading agents: {(error as Error).message}</div>;
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Agents</h1>
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {agents.map((agent) => (
+          <div key={agent.id} className="border rounded-lg p-4 shadow-sm">
+            <h2 className="text-xl font-semibold">{agent.name}</h2>
+            <p className="text-sm text-gray-500">{agent.id}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AgentList;

package/src/routes/agent-settings.tsx

@@ -0,0 +1,48 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import AgentSettings from '@/components/agent-settings';
+import { useAgent } from '@/hooks/use-query-hooks';
+import { ArrowLeft } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
+import type { UUID, Agent } from '@elizaos/core';
+
+export default function AgentSettingsRoute() {
+  const { agentId } = useParams<{ agentId: string }>();
+  const navigate = useNavigate();
+  const { data: agentData, isLoading } = useAgent(agentId as UUID);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!agentData?.data) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <p className="text-muted-foreground">Agent not found</p>
+        <Button onClick={() => navigate('/')}>Back to Home</Button>
+      </div>
+    );
+  }
+
+  const agent: Agent = {
+    ...agentData.data,
+    createdAt: agentData.data.createdAt ?? Date.now(),
+    bio: agentData.data.bio ?? [],
+    topics: agentData.data.topics ?? [],
+    adjectives: agentData.data.adjectives ?? [],
+    style: agentData.data.style ?? { all: [], chat: [], post: [] },
+    settings: agentData.data.settings ?? { secrets: {} },
+  } as Agent;
+
+  return (
+    <div className="flex w-full justify-center px-4 sm:px-6 overflow-y-auto">
+      <div className="w-full md:max-w-4xl py-6">
+        <AgentSettings agent={agent} agentId={agentId as UUID} onSaveComplete={() => {}} />
+      </div>
+    </div>
+  );
+}

package/src/routes/character-detail.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+const CharacterDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  // This is a placeholder component - in a real implementation,
+  // you would fetch character data from an API based on the ID
+  const character = {
+    id,
+    name: `Character ${id}`,
+    description: 'This is a character description.',
+    traits: ['Friendly', 'Intelligent', 'Curious'],
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">{character.name}</h1>
+      <div className="grid gap-4">
+        <div className="border rounded-lg p-4 shadow-sm">
+          <h2 className="text-xl font-semibold">Character Details</h2>
+          <p className="text-sm text-gray-500">ID: {character.id}</p>
+          <p className="mt-2">{character.description}</p>
+
+          <h3 className="text-lg font-semibold mt-4">Traits</h3>
+          <ul className="list-disc pl-5">
+            {character.traits.map((trait, index) => (
+              <li key={index}>{trait}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className="mt-4 flex gap-2">
+        <Link
+          to={`/characters/${id}/edit`}
+          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Edit Character
+        </Link>
+        <Link
+          to="/characters"
+          className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"
+        >
+          Back to List
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default CharacterDetail;

package/src/routes/character-form.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+
+const CharacterForm: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const isEditing = id !== 'new';
+
+  // Initial state - in a real app, you would fetch this data for editing
+  const [formData, setFormData] = useState({
+    name: isEditing ? `Character ${id}` : '',
+    description: isEditing ? 'This is a character description.' : '',
+    traits: isEditing ? 'Friendly, Intelligent, Curious' : '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // In a real app, you would save the data to an API here
+    console.log('Form submitted:', formData);
+
+    // Navigate back to the character list
+    navigate('/characters');
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">
+        {isEditing ? `Edit Character: ${formData.name}` : 'Create New Character'}
+      </h1>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="description">Description</Label>
+          <Textarea
+            id="description"
+            name="description"
+            value={formData.description}
+            onChange={handleChange}
+            rows={4}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="traits">Traits (comma separated)</Label>
+          <Input
+            id="traits"
+            name="traits"
+            value={formData.traits}
+            onChange={handleChange}
+            placeholder="Friendly, Intelligent, Curious"
+          />
+        </div>
+
+        <div className="flex gap-2">
+          <Button type="submit">{isEditing ? 'Update Character' : 'Create Character'}</Button>
+          <Button type="button" variant="outline" onClick={() => navigate('/characters')}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CharacterForm;

package/src/routes/character-list.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const CharacterList: React.FC = () => {
+  // This is a placeholder component - in a real implementation,
+  // you would fetch character data from an API
+  const characters = [
+    { id: '1', name: 'Character 1' },
+    { id: '2', name: 'Character 2' },
+    { id: '3', name: 'Character 3' },
+  ];
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Characters</h1>
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {characters.map((character) => (
+          <div key={character.id} className="border rounded-lg p-4 shadow-sm">
+            <h2 className="text-xl font-semibold">{character.name}</h2>
+            <Link to={`/characters/${character.id}`} className="text-blue-500 hover:underline">
+              View Details
+            </Link>
+          </div>
+        ))}
+      </div>
+      <div className="mt-4">
+        <Link
+          to="/characters/new"
+          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Create New Character
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default CharacterList;