@elizaos/client 1.5.5-alpha.10

package/src/types/rooms.ts

@@ -0,0 +1,8 @@
+import { ChannelType, type UUID } from '@elizaos/core';
+
+export interface Room {
+  id: string;
+  name: string;
+  type: ChannelType;
+  entities: { id: string; agentId?: string }[];
+}

package/src/types.ts

@@ -0,0 +1,84 @@
+// Update the IAttachment interface
+
+import { Agent, UUID } from '@elizaos/core';
+import type {
+  Agent as CoreAgent,
+  Character as CoreCharacter,
+  Room as CoreRoom,
+  AgentStatus as CoreAgentStatus,
+  ChannelType as CoreChannelType,
+} from '@elizaos/core';
+import type { ServerMetadata, ChannelMetadata, MessageMetadata } from '@elizaos/api-client';
+
+/**
+ * Interface representing an attachment.
+ * @interface
+ * @property {string} url - The URL of the attachment.
+ * @property {string} [contentType] - The content type of the attachment, optional.
+ * @property {string} title - The title of the attachment.
+ */
+export interface IAttachment {
+  url: string;
+  contentType?: string; // Make contentType optional
+  title: string;
+}
+
+// Agent type for client-side display, extending core Agent with a string status for UI flexibility if needed,
+// but ideally aligns with CoreAgentStatus enum.
+export interface AgentWithStatus extends Partial<CoreAgent> {
+  id: UUID;
+  name: string;
+  characterName?: string; // From core Agent, which extends Character
+  bio?: string | string[];
+  status: CoreAgentStatus; // Use the enum from @elizaos/core
+  settings?: CoreCharacter['settings']; // From core Character
+  // any other client-specific properties
+}
+
+// Interface for agent panels (public routes)
+export interface AgentPanel {
+  name: string;
+  path: string;
+}
+
+// Represents a server/guild in the central messaging system for the client
+export interface MessageServer {
+  id: UUID; // Global serverId
+  name: string;
+  sourceType: string;
+  sourceId?: string;
+  metadata?: ServerMetadata;
+  createdAt: string; // ISO Date string from server, or Date object
+  updatedAt: string; // ISO Date string from server, or Date object
+}
+
+// Represents a channel within a MessageServer for the client
+export interface MessageChannel {
+  id: UUID; // Global channelId
+  messageServerId: UUID;
+  name: string;
+  type: CoreChannelType; // Using the enum from @elizaos/core
+  sourceType?: string;
+  sourceId?: string;
+  topic?: string;
+  metadata?: ChannelMetadata;
+  createdAt: string; // ISO Date string from server, or Date object
+  updatedAt: string; // ISO Date string from server, or Date object
+}
+
+// Represents a message from the central system for client display
+// This should align with what apiClient.getChannelMessages returns for each message
+export interface ServerMessage {
+  id: UUID;
+  channelId: UUID;
+  serverId?: UUID; // Optional: May be added during client-side processing or be in metadata
+  authorId: UUID;
+  authorDisplayName?: string; // Optional: May be in metadata or fetched separately
+  content: string;
+  createdAt: number; // Expecting timestamp MS for UI sorting/display
+  rawMessage?: unknown;
+  inReplyToRootMessageId?: UUID;
+  sourceType?: string;
+  sourceId?: string;
+  metadata?: MessageMetadata;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg' {
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.json' {
+  const content: string;
+  export default content;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_SERVER_PORT: string;
+  // Add other env variables as needed
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+// Ensure global types
+declare global {
+  interface Window {
+    global: typeof globalThis;
+    Buffer: typeof Buffer;
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,90 @@
+import type { Config } from 'tailwindcss';
+import tailwindAnimate from 'tailwindcss-animate';
+
+export default {
+  darkMode: ['class'],
+  content: ['src/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+      },
+      keyframes: {
+        'bounce-sm': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-4px)' },
+        },
+      },
+      animation: {
+        'bounce-sm': 'bounce-sm 0.6s ease-in-out 2',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          '1': 'hsl(var(--chart-1))',
+          '2': 'hsl(var(--chart-2))',
+          '3': 'hsl(var(--chart-3))',
+          '4': 'hsl(var(--chart-4))',
+          '5': 'hsl(var(--chart-5))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+    },
+  },
+  plugins: [tailwindAnimate],
+} satisfies Config;

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/vite.config.ts

@@ -0,0 +1,102 @@
+import { defineConfig, type PluginOption } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'node:path';
+// @ts-ignore
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+export default defineConfig(({ mode, command }) => {
+  const isDev = mode === 'development';
+  const isBuild = command === 'build';
+
+  return {
+    plugins: [tailwindcss() as unknown as PluginOption, react() as unknown as PluginOption],
+    server: {
+      port: 5173,
+      strictPort: true,
+      host: true,
+      // Reduce watcher pressure to avoid EMFILE on large workspaces
+      watch: {
+        ignored: [
+          '**/node_modules/**',
+          '**/.git/**',
+          '**/.turbo/**',
+          '**/dist/**',
+          '**/coverage/**',
+          'cypress/screenshots/**',
+          'cypress/videos/**',
+        ],
+        usePolling: true,
+        interval: 150,
+      },
+      proxy: {
+        '/api': 'http://localhost:3000',
+        '/socket.io': {
+          target: 'http://localhost:3000',
+          ws: true,
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        // In dev mode, use source. In build/production, let Node resolution handle it
+        ...(isDev
+          ? {
+              '@elizaos/core': path.resolve(__dirname, '../core/src/index.ts'),
+            }
+          : {}),
+        // Prevent node Sentry code from entering the browser bundle
+        '@sentry/node': path.resolve(__dirname, './src/mocks/empty-module.ts'),
+        '@sentry/node-core': path.resolve(__dirname, './src/mocks/empty-module.ts'),
+      },
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        define: {
+          global: 'globalThis',
+        },
+      },
+      entries: ['./src/entry.tsx'],
+      include: ['buffer', 'process', '@elizaos/core', '@elizaos/api-client'],
+    },
+    build: {
+      target: 'esnext',
+      sourcemap: false,
+      reportCompressedSize: false,
+      minify: 'esbuild',
+      chunkSizeWarningLimit: 2200, // Increase chunk size warning limit to accommodate large chunks
+      cssMinify: false, // Disable CSS minification to avoid :is() syntax errors in webkit scrollbar styles
+      rollupOptions: {
+        input: {
+          main: path.resolve(__dirname, 'index.html'),
+        },
+        output: {
+          manualChunks: (id) => {
+            if (id.includes('node_modules')) {
+              if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
+                return 'react-vendor';
+              }
+              if (id.includes('@radix-ui')) {
+                return 'ui-vendor';
+              }
+              if (id.includes('@elizaos')) {
+                return 'elizaos-vendor';
+              }
+            }
+          },
+        },
+      },
+      commonjsOptions: {
+        transformMixedEsModules: true,
+        ignoreTryCatch: false,
+      },
+    },
+    define: {
+      // Define globals for browser compatibility
+      'process.env': JSON.stringify({}),
+      'process.browser': true,
+      global: 'globalThis',
+    },
+  };
+});