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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elizaos/client",
-  "version": "1.6.1-alpha.6",
+  "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.6",
-    "@elizaos/core": "1.6.1-alpha.6",
+    "@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",
@@ -161,5 +161,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "wait-on": "^9.0.1"
   },
-  "gitHead": "8a0b8d2bba9bc932188f8a4f7f06360f65748f04"
+  "gitHead": "de2adbe7a4492c8c015e77105bf87fa3570269c3"
 }

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

@@ -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

@@ -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

@@ -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

@@ -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>
   );

package/src/components/agent-prism/CollapsibleSection.tsx

@@ -1,7 +1,7 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { cn } from "@/lib/utils";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
 
 export interface CollapsibleSectionProps {
   /**
@@ -51,9 +51,9 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   rightContent,
   children,
   defaultOpen = false,
-  className = "",
-  triggerClassName = "",
-  contentClassName = "",
+  className = '',
+  triggerClassName = '',
+  contentClassName = '',
   onOpenChange,
 }) => {
   const [open, setOpen] = React.useState(defaultOpen);
@@ -63,42 +63,42 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
       setOpen(open);
       onOpenChange?.(open);
     },
-    [onOpenChange],
+    [onOpenChange]
   );
 
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>): void => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleOpenChange(!open);
       }
     },
-    [handleOpenChange, open],
+    [handleOpenChange, open]
   );
 
   return (
     <Collapsible.Root
       open={open}
       onOpenChange={handleOpenChange}
-      className={cn("rounded-lg", className)}
+      className={cn('rounded-lg', className)}
     >
       <Collapsible.Trigger asChild>
         <div
           tabIndex={0}
           role="button"
           className={cn(
-            "mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-1 py-3 text-left text-sm font-medium text-foreground",
-            triggerClassName,
+            'mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-1 py-3 text-left text-sm font-medium text-foreground',
+            triggerClassName
           )}
           onKeyDown={handleKeyDown}
           aria-expanded={open}
-          aria-label={`${open ? "Collapse" : "Expand"} content of "${title}" section`}
+          aria-label={`${open ? 'Collapse' : 'Expand'} content of "${title}" section`}
         >
           <div className="flex w-full items-center gap-2">
             <ChevronDown
               className={cn(
-                "h-3 w-3 text-muted-foreground transition-transform duration-200",
-                open && "rotate-180",
+                'h-3 w-3 text-muted-foreground transition-transform duration-200',
+                open && 'rotate-180'
               )}
             />
             <span className="truncate">{title}</span>
@@ -110,8 +110,8 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
 
       <Collapsible.Content
         className={cn(
-          "data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
-          contentClassName,
+          'data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown',
+          contentClassName
         )}
       >
         {children}