npm - @elizaos/client - Versions diffs - 1.6.1-alpha.5 → 1.6.1-alpha.7 - Mend

@elizaos/client 1.6.1-alpha.5 → 1.6.1-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <title>ElizaOS - Client</title>
-    <script type="module" crossorigin src="/assets/main-4tyUgNqd.js"></script>
+    <script type="module" crossorigin src="/assets/main-CQAV8tyh.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/client",
-  "version": "1.6.1-alpha.5",
+  "version": "1.6.1-alpha.7",
   "description": "Web client interface for ElizaOS agents",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@elizaos/api-client": "1.6.1-alpha.5",
-    "@elizaos/core": "1.6.1-alpha.5",
+    "@elizaos/api-client": "1.6.1-alpha.7",
+    "@elizaos/core": "1.6.1-alpha.7",
     "@evilmartians/agent-prism-data": "^0.0.4",
     "@evilmartians/agent-prism-types": "^0.0.4",
     "@hookform/resolvers": "^5.1.1",
@@ -81,7 +81,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@react-spring/web": "^9.7.5",
+    "@react-spring/web": "^10.0.3",
     "@tanstack/react-query": "^5.67.2",
     "@uidotdev/usehooks": "^2.4.1",
     "buffer": "^6.0.3",
@@ -92,7 +92,7 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "evt": "^2.5.9",
-    "lucide-react": "^0.469.0",
+    "lucide-react": "^0.544.0",
     "react": "^19.1.0",
     "react-aiwriter": "^1.0.0",
     "react-dom": "^19.1.0",
@@ -101,7 +101,7 @@
     "react-joyride": "^2.9.3",
     "react-json-pretty": "^2.2.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^2.1.7",
+    "react-resizable-panels": "^3.0.6",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
     "remark-breaks": "^4.0.0",
@@ -109,7 +109,7 @@
     "semver": "^7.7.1",
     "shiki": "^3.6.0",
     "socket.io-client": "^4.8.1",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "use-stick-to-bottom": "^1.1.1",
     "vis-data": "^8.0.3",
@@ -118,48 +118,48 @@
   },
   "devDependencies": {
     "@cypress/react": "^9.0.1",
-    "@cypress/vite-dev-server": "^6.0.3",
+    "@cypress/vite-dev-server": "^7.0.0",
     "@eslint/js": "^9.22.0",
-    "@happy-dom/global-registrator": "^18.0.1",
+    "@happy-dom/global-registrator": "^19.0.2",
     "@playwright/test": "^1.40.0",
     "@radix-ui/react-direction": "^1.1.1",
     "@rollup/plugin-inject": "^5.0.5",
     "@tailwindcss/vite": "^4.1.0",
     "@testing-library/cypress": "^10.0.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/cypress": "^1.1.6",
     "@types/node": "^24.0.1",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.1.16",
     "@types/react-dom": "^19.0.4",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "8.26.0",
-    "@typescript-eslint/parser": "8.26.0",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@typescript-eslint/eslint-plugin": "8.45.0",
+    "@typescript-eslint/parser": "8.45.0",
+    "@vitejs/plugin-react-swc": "^4.1.0",
     "asn1.js": "^5.4.1",
-    "cypress": "^14.5.4",
+    "cypress": "^15.3.0",
     "cypress-real-events": "^1.14.0",
     "eslint": "^9.22.0",
-    "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "evp_bytestokey": "^1.0.3",
-    "globals": "^15.15.0",
-    "jsdom": "^26.1.0",
+    "globals": "^16.4.0",
+    "jsdom": "^27.0.0",
     "postcss": "^8.5.3",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "process": "^0.11.10",
-    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "tailwindcss": "^4.1.0",
-    "typescript": "5.8.2",
-    "typescript-eslint": "^8.26.0",
-    "vite": "6.3.6",
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "wait-on": "^8.0.3"
+    "wait-on": "^9.0.1"
   },
-  "gitHead": "90c052c82d42bdbfac79771ccdbcd6a1be939562"
+  "gitHead": "de2adbe7a4492c8c015e77105bf87fa3570269c3"
 }

package/src/components/agent-prism/Avatar.tsx CHANGED Viewed

@@ -1,65 +1,58 @@
-import { cn } from "@/lib/utils";
-import { User } from "lucide-react";
-import { useState, type ComponentPropsWithRef, type ReactElement } from "react";
+import { cn } from '@/lib/utils';
+import { User } from 'lucide-react';
+import { useState, type ComponentPropsWithRef, type ReactElement } from 'react';
-import {
-  ROUNDED_CLASSES,
-  type ColorVariant,
-  type ComponentSize,
-} from "./shared.ts";
+import { ROUNDED_CLASSES, type ColorVariant, type ComponentSize } from './shared.ts';
-export type AvatarSize = Extract<
-  ComponentSize,
-  "4" | "6" | "8" | "9" | "10" | "11" | "12" | "16"
->;
+export type AvatarSize = Extract<ComponentSize, '4' | '6' | '8' | '9' | '10' | '11' | '12' | '16'>;
 const sizeClasses: Record<AvatarSize, string> = {
-  "4": "size-4 text-xs",
-  "6": "size-6 text-xs",
-  "8": "size-8 text-xs",
-  "9": "size-9 text-sm",
-  "10": "size-10 text-base",
-  "11": "size-11 text-lg",
-  "12": "size-12 text-xl",
-  "16": "size-16 text-2xl",
+  '4': 'size-4 text-xs',
+  '6': 'size-6 text-xs',
+  '8': 'size-8 text-xs',
+  '9': 'size-9 text-sm',
+  '10': 'size-10 text-base',
+  '11': 'size-11 text-lg',
+  '12': 'size-12 text-xl',
+  '16': 'size-16 text-2xl',
 };
 const iconSizeClasses: Record<AvatarSize, string> = {
-  "4": "size-3",
-  "6": "size-4",
-  "8": "size-6",
-  "9": "size-7",
-  "10": "size-8",
-  "11": "size-9",
-  "12": "size-10",
-  "16": "size-12",
+  '4': 'size-3',
+  '6': 'size-4',
+  '8': 'size-6',
+  '9': 'size-7',
+  '10': 'size-8',
+  '11': 'size-9',
+  '12': 'size-10',
+  '16': 'size-12',
 };
 const textSizeClasses: Record<AvatarSize, string> = {
-  "4": "text-xs",
-  "6": "text-xs",
-  "8": "text-xs",
-  "9": "text-sm",
-  "10": "text-base",
-  "11": "text-lg",
-  "12": "text-xl",
-  "16": "text-2xl",
+  '4': 'text-xs',
+  '6': 'text-xs',
+  '8': 'text-xs',
+  '9': 'text-sm',
+  '10': 'text-base',
+  '11': 'text-lg',
+  '12': 'text-xl',
+  '16': 'text-2xl',
 };
 const bgColorClasses: Record<ColorVariant, string> = {
-  gray: "bg-muted-foreground",
-  red: "bg-destructive",
-  orange: "bg-chart-1",
-  yellow: "bg-chart-5",
-  teal: "bg-chart-2",
-  indigo: "bg-primary",
-  purple: "bg-primary",
-  sky: "bg-chart-4",
-  cyan: "bg-chart-3",
-  emerald: "bg-accent",
+  gray: 'bg-muted-foreground',
+  red: 'bg-destructive',
+  orange: 'bg-chart-1',
+  yellow: 'bg-chart-5',
+  teal: 'bg-chart-2',
+  indigo: 'bg-primary',
+  purple: 'bg-primary',
+  sky: 'bg-chart-4',
+  cyan: 'bg-chart-3',
+  emerald: 'bg-accent',
 };
-export type AvatarProps = ComponentPropsWithRef<"div"> & {
+export type AvatarProps = ComponentPropsWithRef<'div'> & {
   /**
    * The image source for the avatar
    */
@@ -77,7 +70,7 @@ export type AvatarProps = ComponentPropsWithRef<"div"> & {
    * The border radius of the avatar
    * @default "full"
    */
-  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /**
    * Background color theme for the letter avatar
    * Uses the unified color theme system
@@ -88,7 +81,7 @@ export type AvatarProps = ComponentPropsWithRef<"div"> & {
    * Text color for the letter avatar
    * @default "white"
    */
-  textColor?: "white" | "black";
+  textColor?: 'white' | 'black';
   /**
    * Custom letter to display (will use first letter of alt if not provided)
    */
@@ -101,41 +94,36 @@ export type AvatarProps = ComponentPropsWithRef<"div"> & {
 export const Avatar = ({
   src,
-  alt = "Avatar",
-  size = "10",
-  rounded = "full",
-  bgColor = "gray",
-  textColor = "white",
+  alt = 'Avatar',
+  size = '10',
+  rounded = 'full',
+  bgColor = 'gray',
+  textColor = 'white',
   letter,
-  className = "",
+  className = '',
   ...rest
 }: AvatarProps): ReactElement => {
   const [error, setError] = useState(false);
   const displayLetter = letter ? letter.charAt(0) : alt.charAt(0).toUpperCase();
-  const actualTextColor = textColor === "white" ? "text-white" : "text-black";
+  const actualTextColor = textColor === 'white' ? 'text-white' : 'text-black';
   return (
     <div
       className={cn(
-        "flex items-center justify-center overflow-hidden",
-        "bg-muted",
-        error && "border border-border",
+        'flex items-center justify-center overflow-hidden',
+        'bg-muted',
+        error && 'border border-border',
         sizeClasses[size],
         textSizeClasses[size],
         ROUNDED_CLASSES[rounded],
-        className,
+        className
       )}
       {...rest}
     >
       {error ? (
-        <User
-          className={cn(
-            iconSizeClasses[size],
-            "text-muted-foreground",
-          )}
-        />
+        <User className={cn(iconSizeClasses[size], 'text-muted-foreground')} />
       ) : (
         <>
           {src ? (
@@ -148,10 +136,10 @@ export const Avatar = ({
           ) : (
             <div
               className={cn(
-                "flex h-full w-full items-center justify-center",
+                'flex h-full w-full items-center justify-center',
                 bgColorClasses[bgColor],
                 actualTextColor,
-                "font-medium",
+                'font-medium'
               )}
             >
               {displayLetter}

package/src/components/agent-prism/Badge.tsx CHANGED Viewed

@@ -1,30 +1,26 @@
-import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
-import {
-  COLOR_THEME_CLASSES,
-  type ColorVariant,
-  type ComponentSize,
-} from "./shared.ts";
+import { COLOR_THEME_CLASSES, type ColorVariant, type ComponentSize } from './shared.ts';
-type BadgeSize = Extract<ComponentSize, "4" | "5" | "6" | "7">;
+type BadgeSize = Extract<ComponentSize, '4' | '5' | '6' | '7'>;
 const sizeClasses: Record<BadgeSize, string> = {
-  "4": "px-1 gap-1 h-4",
-  "5": "px-1.5 gap-1 h-5",
-  "6": "px-2 gap-1.5 h-6",
-  "7": "px-2.5 gap-2 h-7",
+  '4': 'px-1 gap-1 h-4',
+  '5': 'px-1.5 gap-1 h-5',
+  '6': 'px-2 gap-1.5 h-6',
+  '7': 'px-2.5 gap-2 h-7',
 };
 const textSizes: Record<BadgeSize, string> = {
-  "4": "text-xs font-normal leading-3",
-  "5": "text-xs font-medium",
-  "6": "text-sm font-medium",
-  "7": "text-sm font-medium",
+  '4': 'text-xs font-normal leading-3',
+  '5': 'text-xs font-medium',
+  '6': 'text-sm font-medium',
+  '7': 'text-sm font-medium',
 };
-export type BadgeProps = ComponentPropsWithRef<"span"> & {
+export type BadgeProps = ComponentPropsWithRef<'span'> & {
   /**
    * The content of the badge
    */
@@ -41,7 +37,7 @@ export type BadgeProps = ComponentPropsWithRef<"span"> & {
    * The visual variant of the badge
    * @default "solid"
    */
-  variant?: "solid" | "outline";
+  variant?: 'solid' | 'outline';
   /**
    * The size of the badge
@@ -67,38 +63,35 @@ export type BadgeProps = ComponentPropsWithRef<"span"> & {
 export const Badge = ({
   label,
-  theme = "gray",
-  variant = "solid",
-  size = "4",
+  theme = 'gray',
+  variant = 'solid',
+  size = '4',
   iconStart,
   iconEnd,
-  className = "",
+  className = '',
   ...rest
 }: BadgeProps): ReactElement => {
   const { bg, darkBg, text, darkText } = COLOR_THEME_CLASSES[theme];
   const variantClasses =
-    variant === "outline"
+    variant === 'outline'
       ? `border ${text} ${darkText} bg-transparent dark:bg-transparent border-current`
       : `${bg} ${text} ${darkBg} ${darkText}`;
   return (
     <span
       className={cn(
-        "inline-flex min-w-0 items-center overflow-hidden rounded font-medium",
+        'inline-flex min-w-0 items-center overflow-hidden rounded font-medium',
         variantClasses,
         sizeClasses[size],
-        className,
+        className
       )}
       {...rest}
     >
       {iconStart && <span className="shrink-0">{iconStart}</span>}
       <span
-        className={cn(
-          textSizes[size],
-          "min-w-0 max-w-full flex-shrink-0 truncate tracking-normal",
-        )}
+        className={cn(textSizes[size], 'min-w-0 max-w-full flex-shrink-0 truncate tracking-normal')}
       >
         {label}
       </span>

package/src/components/agent-prism/Button.tsx CHANGED Viewed

@@ -1,53 +1,45 @@
-import type { ComponentPropsWithRef, ReactElement } from "react";
+import type { ComponentPropsWithRef, ReactElement } from 'react';
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
-import {
-  ROUNDED_CLASSES,
-  type ColorVariant,
-  type ComponentSize,
-} from "./shared.ts";
+import { ROUNDED_CLASSES, type ColorVariant, type ComponentSize } from './shared.ts';
-type ButtonSize = Extract<
-  ComponentSize,
-  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
->;
+type ButtonSize = Extract<ComponentSize, '6' | '7' | '8' | '9' | '10' | '11' | '12' | '16'>;
 const BASE_CLASSES =
-  "inline-flex items-center justify-center font-medium transition-all duration-200";
+  'inline-flex items-center justify-center font-medium transition-all duration-200';
 const sizeClasses = {
-  "6": "h-6 px-2 gap-1 text-xs",
-  "7": "h-7 px-2 gap-1 text-xs",
-  "8": "h-8 px-2 gap-1 text-xs",
-  "9": "h-9 px-2.5 gap-2 text-sm",
-  "10": "h-10 px-4 gap-2 text-sm",
-  "11": "h-11 px-5 gap-3 text-base",
-  "12": "h-12 px-5 gap-2.5 text-base",
-  "16": "h-16 px-7 gap-3 text-lg",
+  '6': 'h-6 px-2 gap-1 text-xs',
+  '7': 'h-7 px-2 gap-1 text-xs',
+  '8': 'h-8 px-2 gap-1 text-xs',
+  '9': 'h-9 px-2.5 gap-2 text-sm',
+  '10': 'h-10 px-4 gap-2 text-sm',
+  '11': 'h-11 px-5 gap-3 text-base',
+  '12': 'h-12 px-5 gap-2.5 text-base',
+  '16': 'h-16 px-7 gap-3 text-lg',
 };
 const filledThemeClasses: Record<ColorVariant, string> = {
-  gray: "bg-muted text-muted-foreground",
-  purple: "bg-primary text-primary-foreground",
-  indigo: "bg-primary text-primary-foreground",
-  orange: "bg-chart-1 text-primary-foreground",
-  teal: "bg-chart-2 text-primary-foreground",
-  cyan: "bg-chart-3 text-primary-foreground",
-  sky: "bg-chart-4 text-primary-foreground",
-  yellow: "bg-chart-5 text-primary-foreground",
-  emerald: "bg-accent text-accent-foreground",
-  red: "bg-destructive text-destructive-foreground",
+  gray: 'bg-muted text-muted-foreground',
+  purple: 'bg-primary text-primary-foreground',
+  indigo: 'bg-primary text-primary-foreground',
+  orange: 'bg-chart-1 text-primary-foreground',
+  teal: 'bg-chart-2 text-primary-foreground',
+  cyan: 'bg-chart-3 text-primary-foreground',
+  sky: 'bg-chart-4 text-primary-foreground',
+  yellow: 'bg-chart-5 text-primary-foreground',
+  emerald: 'bg-accent text-accent-foreground',
+  red: 'bg-destructive text-destructive-foreground',
 };
 const variantClasses = {
-  filled: "",
-  outlined:
-    "border border-2 bg-transparent text-foreground border-border",
-  ghost: "bg-transparent text-muted-foreground",
+  filled: '',
+  outlined: 'border border-2 bg-transparent text-foreground border-border',
+  ghost: 'bg-transparent text-muted-foreground',
 };
-export type ButtonProps = ComponentPropsWithRef<"button"> & {
+export type ButtonProps = ComponentPropsWithRef<'button'> & {
   /**
    * The size of the button
    * @default "6"
@@ -64,13 +56,13 @@ export type ButtonProps = ComponentPropsWithRef<"button"> & {
    * The border radius of the button
    * @default "md"
    */
-  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /**
    * The visual variant of the button
    * @default "filled"
    */
-  variant?: "filled" | "outlined" | "ghost";
+  variant?: 'filled' | 'outlined' | 'ghost';
   /**
    * Makes the button full width
@@ -91,27 +83,23 @@ export type ButtonProps = ComponentPropsWithRef<"button"> & {
 export const Button = ({
   children,
-  size = "6",
-  theme = "gray",
-  rounded = "md",
-  variant = "filled",
+  size = '6',
+  theme = 'gray',
+  rounded = 'md',
+  variant = 'filled',
   fullWidth = false,
   disabled = false,
   iconStart,
   iconEnd,
-  type = "button",
+  type = 'button',
   onClick,
-  className = "",
+  className = '',
   ...rest
 }: ButtonProps) => {
-  const widthClass = fullWidth ? "w-full" : "";
-  const stateClasses = disabled
-    ? "cursor-not-allowed opacity-50"
-    : "hover:opacity-70";
+  const widthClass = fullWidth ? 'w-full' : '';
+  const stateClasses = disabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-70';
   const filledThemeClass =
-    variant === "filled"
-      ? filledThemeClasses[theme] || filledThemeClasses.gray
-      : "";
+    variant === 'filled' ? filledThemeClasses[theme] || filledThemeClasses.gray : '';
   return (
     <button
@@ -126,7 +114,7 @@ export const Button = ({
         filledThemeClass,
         widthClass,
         stateClasses,
-        className,
+        className
       )}
       {...rest}
     >

package/src/components/agent-prism/CollapseAndExpandControls.tsx CHANGED Viewed

@@ -1,44 +1,28 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
-import { ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+import { ChevronsUpDown, ChevronsDownUp } from 'lucide-react';
-import { IconButton } from "./IconButton.tsx";
+import { IconButton } from './IconButton.tsx';
-export type SpanCardExpandAllButtonProps = ComponentPropsWithRef<"button"> & {
+export type SpanCardExpandAllButtonProps = ComponentPropsWithRef<'button'> & {
   onExpandAll: () => void;
 };
-export type SpanCardCollapseAllButtonProps = ComponentPropsWithRef<"button"> & {
+export type SpanCardCollapseAllButtonProps = ComponentPropsWithRef<'button'> & {
   onCollapseAll: () => void;
 };
-export const ExpandAllButton = ({
-  onExpandAll,
-  ...rest
-}: SpanCardExpandAllButtonProps) => {
+export const ExpandAllButton = ({ onExpandAll, ...rest }: SpanCardExpandAllButtonProps) => {
   return (
-    <IconButton
-      size="7"
-      onClick={onExpandAll}
-      aria-label="Expand all"
-      {...rest}
-    >
+    <IconButton size="7" onClick={onExpandAll} aria-label="Expand all" {...rest}>
       <ChevronsUpDown className="size-3.5" />
     </IconButton>
   );
 };
-export const CollapseAllButton = ({
-  onCollapseAll,
-  ...rest
-}: SpanCardCollapseAllButtonProps) => {
+export const CollapseAllButton = ({ onCollapseAll, ...rest }: SpanCardCollapseAllButtonProps) => {
   return (
-    <IconButton
-      size="7"
-      onClick={onCollapseAll}
-      aria-label="Collapse all"
-      {...rest}
-    >
+    <IconButton size="7" onClick={onCollapseAll} aria-label="Collapse all" {...rest}>
       <ChevronsDownUp className="size-3.5" />
     </IconButton>
   );